AG-11705 Update theme css to use theme params

- Adds accentColor, spacing and chrome theme params. - Updates css theme variables to inherit from the theme params and removes unnecessary indirection/inheritance. - Pushes some variables into their local context where they did not need to be global. - Fixes inconsistent colours across context menu, dialogs and other popovers.
ag-grid · Feb 3, 2025 · 3ebf0aa · 3ebf0aa
1 parent 0236370
commit 3ebf0aa
Show file tree

Hide file tree

Showing 48 changed files with 359 additions and 332 deletions.
diff --git a/packages/ag-charts-community/src/chart/interaction/tooltipManager.css b/packages/ag-charts-community/src/chart/interaction/tooltipManager.css
@@ -11,15 +11,15 @@
     font-family: var(--ag-charts-chrome-font-family);
     font-size: var(--ag-charts-chrome-font-size);
     font-weight: var(--ag-charts-chrome-font-weight);
-    color: var(--ag-charts-tooltip-text-color);
-    background: var(--ag-charts-tooltip-background-color);
-    border: var(--ag-charts-tooltip-border);
-    border-radius: var(--ag-charts-tooltip-border-radius);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
+    color: var(--ag-charts-chrome-text-color);
+    background: var(--ag-charts-chrome-background-color);
+    border: var(--ag-charts-border);
+    border-radius: var(--ag-charts-border-radius);
+    box-shadow: var(--ag-charts-shadow);
 }
 
-.ag-charts-tooltip--compact {
-    --ag-charts-content-padding: var(--ag-charts-content-compact-padding);
+.ag-charts-tooltip--compact .ag-charts-tooltip-content {
+    padding: 3px 6px;
 }
 
 .ag-charts-tooltip--arrow::before {
@@ -85,8 +85,8 @@
 .ag-charts-tooltip-content {
     display: grid;
     grid: auto-flow minmax(1em, auto) / 1fr;
-    padding: var(--ag-charts-content-padding);
-    gap: var(--ag-charts-content-gap);
+    padding: 8px 12px;
+    gap: 8px;
 }
 
 .ag-charts-tooltip-content:has(.ag-charts-tooltip-symbol) {

diff --git a/packages/ag-charts-community/src/chart/themes/chartTheme.ts b/packages/ag-charts-community/src/chart/themes/chartTheme.ts
@@ -44,7 +44,6 @@ import {
     DEFAULT_GRIDLINE_ENABLED,
     DEFAULT_HIERARCHY_FILLS,
     DEFAULT_HIERARCHY_STROKES,
-    DEFAULT_INVERTED_BACKGROUND_COLOUR,
     DEFAULT_POLAR_SERIES_STROKE,
     DEFAULT_SEPARATION_LINES_COLOUR,
     DEFAULT_SHADOW_COLOUR,
@@ -454,20 +453,30 @@ export class ChartTheme {
 
     getPublicParameters(): Required<WithThemeParams<AgChartThemeParams>> {
         return {
+            accentColor: '#2196f3',
             axisColor: '#c3c3c3',
             backgroundColor: DEFAULT_BACKGROUND_FILL,
-            borderColor: '#ddd',
+            borderColor: { $mix: [{ $ref: 'foregroundColor' }, { $ref: 'backgroundColor' }, 0.818] },
             foregroundColor: '#464646',
             fontFamily: 'Verdana, sans-serif',
             fontSize: FONT_SIZE.SMALL,
             fontWeight: 400,
             gridLineColor: '#e0eaf1',
             padding: 20,
+            spacing: 4,
             subtleTextColor: { $mix: [{ $ref: 'textColor' }, { $ref: 'backgroundColor' }, 0.38] },
             textColor: { $ref: 'foregroundColor' },
+
+            chromeBackgroundColor: { $mix: [{ $ref: 'foregroundColor' }, { $ref: 'backgroundColor' }, 0.975] },
+            chromeFontFamily: { $ref: 'fontFamily' },
+            chromeFontSize: { $ref: 'fontSize' },
+            chromeFontWeight: { $ref: 'fontWeight' },
+            chromeTextColor: '#181d1f',
+            chromeSubtleTextColor: { $mix: [{ $ref: 'chromeTextColor' }, { $ref: 'backgroundColor' }, 0.38] },
         };
     }
 
+    // Private parameters that are not exposed in the themes API.
     getTemplateParameters() {
         const { isEnterprise } = enterpriseModule;
 
@@ -478,7 +487,6 @@ export class ChartTheme {
         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()
-        params.set(DEFAULT_INVERTED_BACKGROUND_COLOUR, 'black');
         params.set(DEFAULT_SHADOW_COLOUR, '#00000080');
         params.set(DEFAULT_DIVERGING_SERIES_COLOR_RANGE, [
             DEFAULT_FILLS.ORANGE,

diff --git a/packages/ag-charts-community/src/chart/themes/darkTheme.ts b/packages/ag-charts-community/src/chart/themes/darkTheme.ts
@@ -17,7 +17,6 @@ import {
     DEFAULT_GAUGE_SERIES_COLOR_RANGE,
     DEFAULT_HIERARCHY_FILLS,
     DEFAULT_HIERARCHY_STROKES,
-    DEFAULT_INVERTED_BACKGROUND_COLOUR,
     DEFAULT_POLAR_SERIES_STROKE,
     DEFAULT_SEPARATION_LINES_COLOUR,
     DEFAULT_TEXTBOX_COLOR,
@@ -75,9 +74,11 @@ export class DarkTheme extends ChartTheme {
             ...super.getPublicParameters(),
             backgroundColor: DEFAULT_DARK_BACKGROUND_FILL,
             borderColor: '#4b525d',
+            chromeBackgroundColor: { $mix: [{ $ref: 'foregroundColor' }, { $ref: 'backgroundColor' }, 0.93] },
             foregroundColor: '#fff',
             gridLineColor: '#545a6e',
             subtleTextColor: { $mix: [{ $ref: 'foregroundColor' }, { $ref: 'backgroundColor' }, 0.57] },
+            chromeTextColor: { $ref: 'textColor' },
         };
     }
 
@@ -113,7 +114,6 @@ export class DarkTheme extends ChartTheme {
         params.set(DEFAULT_HIERARCHY_FILLS, ['#192834', '#253746', '#324859', '#3f596c', '#4d6a80']);
         params.set(DEFAULT_HIERARCHY_STROKES, ['#192834', '#3b5164', '#496275', '#577287', '#668399']);
         params.set(DEFAULT_BACKGROUND_COLOUR, DEFAULT_DARK_BACKGROUND_FILL); // TODO: remove uses in paletteFactory()
-        params.set(DEFAULT_INVERTED_BACKGROUND_COLOUR, 'white');
 
         params.set(DEFAULT_FINANCIAL_CHARTS_ANNOTATION_COLOR, DEFAULT_DARK_FILLS.BLUE);
         params.set(DEFAULT_TEXT_ANNOTATION_COLOR, '#fff');

diff --git a/packages/ag-charts-community/src/chart/themes/symbols.ts b/packages/ag-charts-community/src/chart/themes/symbols.ts
@@ -4,7 +4,6 @@ export const IS_ENTERPRISE = Symbol('is-enterprise') as unknown as boolean;
 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_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/components/menu/menu.css b/packages/ag-charts-community/src/components/menu/menu.css
@@ -1,10 +1,10 @@
 .ag-charts-menu {
     --item-padding: 6px 12px;
-    --icon-color: var(--ag-charts-popover-foreground-color);
+    --icon-color: var(--ag-charts-chrome-text-color);
     display: grid;
     grid: auto-flow auto / 1fr;
     column-gap: 12px;
-    font-size: var(--ag-charts-popover-font-size-small);
+    font-size: var(--ag-charts-chrome-font-size);
 }
 
 .ag-charts-menu:has(.ag-charts-menu__icon, .ag-charts-menu__row--stroke-width-visible) {
@@ -46,19 +46,19 @@
 }
 
 .ag-charts-menu__row:focus {
-    background: var(--ag-charts-popover-hover-color);
+    background: var(--ag-charts-chrome-focus-color);
 }
 
 .ag-charts-menu__row:focus-visible {
     outline: var(--ag-charts-focus-border);
     box-shadow: var(--ag-charts-focus-border-shadow);
-    z-index: calc(var(--ag-charts-layer-ui-overlay) + 1);
+    z-index: var(--ag-charts-layer-menu);
 }
 
 .ag-charts-menu__row--active {
-    --icon-color: var(--ag-charts-popover-active-color);
-    background: var(--ag-charts-popover-active-background-color);
-    color: var(--ag-charts-popover-active-color);
+    --icon-color: var(--ag-charts-accent-color);
+    background: var(--ag-charts-chrome-focus-color);
+    color: var(--ag-charts-accent-color);
 }
 
 .ag-charts-menu__label {

diff --git a/packages/ag-charts-community/src/components/popover/popover.css b/packages/ag-charts-community/src/components/popover/popover.css
@@ -1,12 +1,12 @@
 .ag-charts-popover {
     position: absolute;
-    border: var(--ag-charts-popover-border);
-    border-radius: var(--ag-charts-popover-border-radius);
-    background: var(--ag-charts-popover-background-color);
-    color: var(--ag-charts-popover-foreground-color);
+    border: var(--ag-charts-border);
+    border-radius: var(--ag-charts-border-radius);
+    background: var(--ag-charts-chrome-background-color);
+    color: var(--ag-charts-chrome-text-color);
     font-family: var(--ag-charts-chrome-font-family);
     font-size: var(--ag-charts-chrome-font-size);
     font-weight: var(--ag-charts-chrome-font-weight);
-    box-shadow: var(--ag-charts-popover-shadow);
+    box-shadow: var(--ag-charts-shadow);
     z-index: var(--ag-charts-layer-ui-overlay);
 }
diff --git a/packages/ag-charts-community/src/components/toolbar/toolbar.css b/packages/ag-charts-community/src/components/toolbar/toolbar.css
@@ -1,4 +1,7 @@
 .ag-charts-toolbar {
+    --toolbar-gap: calc(var(--ag-charts-spacing) * 2);
+    --toolbar-size: 34px;
+    --toolbar-button-padding: 6px;
     align-items: center;
     display: flex;
     flex-wrap: nowrap;
@@ -9,18 +12,18 @@
 
 .ag-charts-toolbar__button {
     align-items: center;
-    background: var(--ag-charts-toolbar-background-color);
-    border: var(--ag-charts-toolbar-border);
-    color: var(--ag-charts-toolbar-foreground-color);
+    background: var(--ag-charts-chrome-background-color);
+    border: var(--ag-charts-border);
+    color: var(--ag-charts-chrome-text-color);
     cursor: pointer;
     display: flex;
     font-family: var(--ag-charts-chrome-font-family);
-    font-size: var(--ag-charts-toolbar-font-size);
+    font-size: var(--ag-charts-chrome-font-size-medium);
     font-weight: var(--ag-charts-chrome-font-weight);
     justify-content: center;
-    min-height: var(--ag-charts-toolbar-size);
-    min-width: var(--ag-charts-toolbar-size);
-    padding: var(--ag-charts-toolbar-button-padding);
+    min-height: var(--toolbar-size);
+    min-width: var(--toolbar-size);
+    padding: var(--toolbar-button-padding);
     position: relative;
     transition:
         background-color 0.25s ease-in-out,
@@ -30,7 +33,7 @@
 }
 
 .ag-charts-toolbar__button:hover {
-    background: var(--ag-charts-toolbar-hover-color);
+    background: var(--ag-charts-chrome-focus-color);
     z-index: 1;
 }
 
@@ -41,15 +44,15 @@
 }
 
 .ag-charts-toolbar__button--active {
-    background: var(--ag-charts-toolbar-active-background-color);
-    border-color: var(--ag-charts-toolbar-active-color);
-    color: var(--ag-charts-toolbar-active-color);
+    background: var(--ag-charts-chrome-focus-color);
+    border-color: var(--ag-charts-accent-color);
+    color: var(--ag-charts-accent-color);
     z-index: 2;
 }
 
 .ag-charts-toolbar__button[aria-disabled='true'] {
-    background: var(--ag-charts-toolbar-disabled-background-color);
-    color: var(--ag-charts-toolbar-disabled-foreground-color);
+    background: var(--ag-charts-input-disabled-background-color);
+    color: var(--ag-charts-input-disabled-text-color);
     cursor: default;
 }
 
@@ -63,14 +66,14 @@
     }
 
     .ag-charts-toolbar__button--first {
-        border-bottom-left-radius: var(--ag-charts-button-radius);
-        border-top-left-radius: var(--ag-charts-button-radius);
+        border-bottom-left-radius: var(--ag-charts-border-radius);
+        border-top-left-radius: var(--ag-charts-border-radius);
         margin: 0;
     }
 
     .ag-charts-toolbar__button--last {
-        border-bottom-right-radius: var(--ag-charts-button-radius);
-        border-top-right-radius: var(--ag-charts-button-radius);
+        border-bottom-right-radius: var(--ag-charts-border-radius);
+        border-top-right-radius: var(--ag-charts-border-radius);
     }
 }
 
@@ -83,21 +86,21 @@
     }
 
     .ag-charts-toolbar__button--first {
-        border-top-left-radius: var(--ag-charts-button-radius);
-        border-top-right-radius: var(--ag-charts-button-radius);
+        border-top-left-radius: var(--ag-charts-border-radius);
+        border-top-right-radius: var(--ag-charts-border-radius);
         margin: 0;
     }
 
     .ag-charts-toolbar__button--last {
-        border-bottom-left-radius: var(--ag-charts-button-radius);
-        border-bottom-right-radius: var(--ag-charts-button-radius);
+        border-bottom-left-radius: var(--ag-charts-border-radius);
+        border-bottom-right-radius: var(--ag-charts-border-radius);
     }
 }
 
 /* Icon */
 
 .ag-charts-toolbar__icon + .ag-charts-toolbar__label {
-    margin-left: var(--ag-charts-toolbar-gap);
+    margin-left: var(--toolbar-gap);
 }
 
 .ag-charts-toolbar__icon,
@@ -119,10 +122,10 @@
 
 .ag-charts-floating-toolbar__drag-handle {
     align-items: center;
-    background: var(--ag-charts-toolbar-background-color);
-    border: var(--ag-charts-toolbar-border);
-    border-bottom-left-radius: var(--ag-charts-button-radius);
-    border-top-left-radius: var(--ag-charts-button-radius);
+    background: var(--ag-charts-chrome-background-color);
+    border: var(--ag-charts-border);
+    border-bottom-left-radius: var(--ag-charts-border-radius);
+    border-top-left-radius: var(--ag-charts-border-radius);
     cursor: grab;
     display: flex;
     justify-content: center;

diff --git a/packages/ag-charts-community/src/dom/container.css b/packages/ag-charts-community/src/dom/container.css
@@ -21,8 +21,8 @@
     pointer-events: auto;
 
     display: flex;
-    align-items: var(--ag-charts-align);
-    justify-content: var(--ag-charts-justify);
+    align-items: center;
+    justify-content: center;
 }
 
 .ag-charts-canvas-container,

diff --git a/packages/ag-charts-community/src/dom/domManager.ts b/packages/ag-charts-community/src/dom/domManager.ts
@@ -242,6 +242,7 @@ export class DOMManager extends BaseManager<Events['type'], Events> {
     // TODO: don't use AgChartThemeParams
     setThemeParameters(params: AgChartThemeParams) {
         const keysMap: Record<keyof AgChartThemeParams, string> = {
+            accentColor: 'accent-color',
             axisColor: 'axis-color',
             backgroundColor: 'background-color',
             borderColor: 'border-color',
@@ -251,14 +252,22 @@ export class DOMManager extends BaseManager<Events['type'], Events> {
             fontWeight: 'font-weight',
             gridLineColor: 'grid-line-color',
             padding: 'padding',
+            spacing: 'spacing',
             subtleTextColor: 'subtle-text-color',
             textColor: 'text-color',
+
+            chromeBackgroundColor: 'chrome-background-color',
+            chromeFontFamily: 'chrome-font-family',
+            chromeFontSize: 'chrome-font-size',
+            chromeFontWeight: 'chrome-font-weight',
+            chromeSubtleTextColor: 'chrome-subtle-text-color',
+            chromeTextColor: 'chrome-text-color',
         };
 
-        const lengthKeys = ['fontSize'];
+        const lengthKeys: Array<keyof AgChartThemeParams> = ['fontSize', 'chromeFontSize', 'spacing'];
 
-        for (const [key, value] of Object.entries(params) as Array<[keyof AgChartThemeParams, string]>) {
-            let formattedValue = value;
+        for (const [key, value] of Object.entries(params) as Array<[keyof AgChartThemeParams, string | number]>) {
+            let formattedValue = `${value}`;
             if (lengthKeys.includes(key)) {
                 formattedValue = `${value}px`;
             }