Valeria-Zimnitskaya · Oct 23, 2026 · Oct 22, 2026 · Oct 23, 2026 · Oct 23, 2026 · Oct 23, 2026
diff --git a/...isual-Verify-area-chart-Highlighted-dots-ordinary-dots-off-1-chromium-linux.png b/...isual-Verify-area-chart-Highlighted-dots-ordinary-dots-off-1-chromium-linux.png
diff --git a/...visual-Verify-area-chart-Highlighted-dots-ordinary-dots-off-1-firefox-linux.png b/...visual-Verify-area-chart-Highlighted-dots-ordinary-dots-off-1-firefox-linux.png
diff --git a/...-visual-Verify-area-chart-Highlighted-dots-ordinary-dots-off-1-webkit-linux.png b/...-visual-Verify-area-chart-Highlighted-dots-ordinary-dots-off-1-webkit-linux.png
diff --git a/...ts/-visual-Verify-area-chart-rendering-with-dots-and-hover-1-chromium-linux.png b/...ts/-visual-Verify-area-chart-rendering-with-dots-and-hover-1-chromium-linux.png
diff --git a/...ots/-visual-Verify-area-chart-rendering-with-dots-and-hover-1-firefox-linux.png b/...ots/-visual-Verify-area-chart-rendering-with-dots-and-hover-1-firefox-linux.png
diff --git a/...hots/-visual-Verify-area-chart-rendering-with-dots-and-hover-1-webkit-linux.png b/...hots/-visual-Verify-area-chart-rendering-with-dots-and-hover-1-webkit-linux.png
diff --git a/...napshots/-visual-Verify-chart-with-no-data-and-single-data-1-chromium-linux.png b/...napshots/-visual-Verify-chart-with-no-data-and-single-data-1-chromium-linux.png
diff --git a/...snapshots/-visual-Verify-chart-with-no-data-and-single-data-1-firefox-linux.png b/...snapshots/-visual-Verify-chart-with-no-data-and-single-data-1-firefox-linux.png
diff --git a/...sual-Verify-legend-and-pattern-fill-hover-and-focus-styles-2-chromium-linux.png b/...sual-Verify-legend-and-pattern-fill-hover-and-focus-styles-2-chromium-linux.png
diff --git a/...ed-area-when-part-of-the-chart-has-no-data-or-only-one-value-1-webkit-linux.png b/...ed-area-when-part-of-the-chart-has-no-data-or-only-one-value-1-webkit-linux.png
diff --git a/...ons-Ve-e8cb8--legend-and-pattern-fill-keyboard-interaction-1-chromium-linux.png b/...ons-Ve-e8cb8--legend-and-pattern-fill-keyboard-interaction-1-chromium-linux.png
diff --git a/...tions-Verify-bar-legend-and-pattern-fill-mouse-interaction-2-chromium-linux.png b/...tions-Verify-bar-legend-and-pattern-fill-mouse-interaction-2-chromium-linux.png
diff --git a/...st.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-line-1-chromium-linux.png b/...st.tsx-snapshots/-visual-Basic-bar-chart-Verify-trend-line-1-chromium-linux.png
diff --git a/...al-Data-variations-Verify-bar-chart-with-single-data-point-1-chromium-linux.png b/...al-Data-variations-Verify-bar-chart-with-single-data-point-1-chromium-linux.png
diff --git a/...d-stacked-bars-Verify-bar-chart-with-grouped-bars-vertical-1-chromium-linux.png b/...d-stacked-bars-Verify-bar-chart-with-grouped-bars-vertical-1-chromium-linux.png
diff --git a/...d-stacked-bars-Verify-bar-chart-with-stacked-bars-vertical-1-chromium-linux.png b/...d-stacked-bars-Verify-bar-chart-with-stacked-bars-vertical-1-chromium-linux.png
diff --git a/...orizontal-bar-legend-and-pattern-fill-keyboard-interaction-1-chromium-linux.png b/...orizontal-bar-legend-and-pattern-fill-keyboard-interaction-1-chromium-linux.png
diff --git a/...-bubble-chart-Patterns-no-axes-patterns-enabled-large-size-1-chromium-linux.png b/...-bubble-chart-Patterns-no-axes-patterns-enabled-large-size-1-chromium-linux.png
diff --git a/...y-bubble-chart-Patterns-no-axes-patterns-enabled-large-size-1-firefox-linux.png b/...y-bubble-chart-Patterns-no-axes-patterns-enabled-large-size-1-firefox-linux.png
diff --git a/...fy-bubble-chart-Patterns-no-axes-patterns-enabled-large-size-1-webkit-linux.png b/...fy-bubble-chart-Patterns-no-axes-patterns-enabled-large-size-1-webkit-linux.png
diff --git a/...ify-bubble-chart-Standard-all-features-enabled-medium-size-1-chromium-linux.png b/...ify-bubble-chart-Standard-all-features-enabled-medium-size-1-chromium-linux.png
diff --git a/...st.tsx-snapshots/-visual-Verify-bubble-chart-implementation-1-firefox-linux.png b/...st.tsx-snapshots/-visual-Verify-bubble-chart-implementation-1-firefox-linux.png
diff --git a/...hots/-visual-Verify-legend-and-pattern-interactions-by-mouse-1-webkit-linux.png b/...hots/-visual-Verify-legend-and-pattern-interactions-by-mouse-1-webkit-linux.png
diff --git a/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx b/semcore/d3-chart/__tests__/chart-legend.browser-test.tsx
@@ -35,10 +35,15 @@ export const locators = {
    * modifier name rather than a `transparent` attribute.
    */
   dimmed: (page: Page) => page.locator('[class*="_transparent_"]'),
+  metric: (page: Page, index?: number) => {
+    const base = page.locator('[data-ui-name="Metric"]');
+    return typeof index === 'number' ? base.nth(index) : base;
+  },
 };
 
 const FLEX_EXAMPLE = 'stories/components/d3-chart/tests/examples/chart-legend/customizable_legend.tsx';
 const TABLE_EXAMPLE = 'stories/components/d3-chart/tests/examples/chart-legend/legend-table-data.tsx';
+const METRICS_EXAMPLE = 'stories/components/d3-chart/tests/examples/chart-legend/legend-with-metrics.tsx';
 
 /**
  * Pairwise set for LegendFlex.
@@ -119,6 +124,35 @@ const tablePairwiseCases = [
   },
 ];
 
+/**
+ * Pairwise set for LegendTable with metrics.
+ *
+ * Factors: diffIcon (none|up|down|mixed), diffUse (good|bad|neutral|mixed),
+ * metricLink (none|single|all), metricsPerItem (1|2), size (m|l).
+ * The two 4-value factors put the lower bound at 16 cases.
+ */
+const metricsPairwiseCases = [
+  ['none', 'good', 'none', 1, 'm'],
+  ['none', 'bad', 'single', 2, 'l'],
+  ['none', 'neutral', 'all', 1, 'm'],
+  ['none', 'mixed', 'none', 2, 'l'],
+  ['up', 'good', 'single', 2, 'm'],
+  ['up', 'bad', 'all', 1, 'l'],
+  ['up', 'neutral', 'none', 2, 'm'],
+  ['up', 'mixed', 'single', 1, 'l'],
+  ['down', 'good', 'all', 1, 'l'],
+  ['down', 'bad', 'none', 2, 'm'],
+  ['down', 'neutral', 'single', 1, 'l'],
+  ['down', 'mixed', 'all', 2, 'm'],
+  ['mixed', 'good', 'none', 2, 'l'],
+  ['mixed', 'bad', 'single', 1, 'm'],
+  ['mixed', 'neutral', 'all', 2, 'l'],
+  ['mixed', 'mixed', 'none', 1, 'm'],
+].map(([diffIcon, diffUse, metricLink, metricsPerItem, size], i) => ({
+  name: `#${i + 1} icon-${diffIcon}, ${diffUse}, link-${metricLink}, ${metricsPerItem}-per-item, ${size}`,
+  props: { diffIcon, diffUse, metricLink, metricsPerItem, legendProps: { size } },
+}));
+
 /* =====================================================
 @visual
 Visual states, hover and focus styles, paddings, margins, and snapshots.
@@ -167,6 +201,65 @@ test.describe(`${TAG.VISUAL}`, () => {
       await expect(page).toHaveScreenshot();
     });
   });
+
+  test.describe('Legend with metrics', () => {
+    metricsPairwiseCases.forEach((c) => {
+      test(`Verify pairwise ${c.name}`, {
+        tag: [TAG.PRIORITY_HIGH, '@d3-chart', '@chart-legend', '@line-chart', '@link'],
+      }, async ({ page }) => {
+        await loadPage(page, METRICS_EXAMPLE, 'en', c.props);
+
+        await locators.legendTable(page).waitFor({ state: 'visible' });
+        await expect(page).toHaveScreenshot();
+      });
+    });
+
+    test('Verify boundary empty diffValue', {
+      tag: [TAG.PRIORITY_MEDIUM, '@d3-chart', '@chart-legend', '@line-chart'],
+    }, async ({ page }) => {
+      await loadPage(page, METRICS_EXAMPLE, 'en', { diffValue: '' });
+
+      await locators.legendTable(page).waitFor({ state: 'visible' });
+      await expect(page).toHaveScreenshot();
+    });
+
+    test('Verify boundary long diffValue', {
+      tag: [TAG.PRIORITY_MEDIUM, '@d3-chart', '@chart-legend', '@line-chart'],
+    }, async ({ page }) => {
+      await loadPage(page, METRICS_EXAMPLE, 'en', { diffValue: '1,234,567,890.12', metricsPerItem: 2 });
+
+      await locators.legendTable(page).waitFor({ state: 'visible' });
+      await expect(page).toHaveScreenshot();
+    });
+
+    test('Verify boundary patterns', {
+      tag: [TAG.PRIORITY_MEDIUM, '@d3-chart', '@chart-legend', '@line-chart'],
+    }, async ({ page }) => {
+      await loadPage(page, METRICS_EXAMPLE, 'en', { patterns: true });
+
+      await locators.legendTable(page).waitFor({ state: 'visible' });
+      await expect(page).toHaveScreenshot();
+    });
+
+    test('Verify a hovered metric row keeps the other rows dimmed', {
+      tag: [TAG.PRIORITY_HIGH, TAG.MOUSE, '@d3-chart', '@chart-legend', '@line-chart', '@link'],
+    }, async ({ page }) => {
+      await loadPage(page, METRICS_EXAMPLE, 'en', { metricLink: 'all' });
+
+      const items = locators.tableItem(page);
+      await locators.metric(page, 0).hover();
+
+      await test.step('Verify only the hovered row stays opaque', async () => {
+        await expect(items.nth(0)).not.toHaveClass(/_transparent_/);
+        const total = await items.count();
+        for (let i = 1; i < total; i++) {
+          await expect(items.nth(i)).toHaveClass(/_transparent_/);
+        }
+      });
+
+      await expect(page).toHaveScreenshot();
+    });
+  });
 });
 
 /* =====================================================

diff --git a/...cs-Verify-a-hovered-metric-row-keeps-the-other-rows-dimmed-1-chromium-linux.png b/...cs-Verify-a-hovered-metric-row-keeps-the-other-rows-dimmed-1-chromium-linux.png
diff --git a/...ics-Verify-a-hovered-metric-row-keeps-the-other-rows-dimmed-1-firefox-linux.png b/...ics-Verify-a-hovered-metric-row-keeps-the-other-rows-dimmed-1-firefox-linux.png
diff --git a/...rics-Verify-a-hovered-metric-row-keeps-the-other-rows-dimmed-1-webkit-linux.png b/...rics-Verify-a-hovered-metric-row-keeps-the-other-rows-dimmed-1-webkit-linux.png
diff --git a/...visual-Legend-with-metrics-Verify-boundary-empty-diffValue-1-chromium-linux.png b/...visual-Legend-with-metrics-Verify-boundary-empty-diffValue-1-chromium-linux.png
diff --git a/...-visual-Legend-with-metrics-Verify-boundary-empty-diffValue-1-firefox-linux.png b/...-visual-Legend-with-metrics-Verify-boundary-empty-diffValue-1-firefox-linux.png
diff --git a/.../-visual-Legend-with-metrics-Verify-boundary-empty-diffValue-1-webkit-linux.png b/.../-visual-Legend-with-metrics-Verify-boundary-empty-diffValue-1-webkit-linux.png
diff --git a/...-visual-Legend-with-metrics-Verify-boundary-long-diffValue-1-chromium-linux.png b/...-visual-Legend-with-metrics-Verify-boundary-long-diffValue-1-chromium-linux.png
diff --git a/.../-visual-Legend-with-metrics-Verify-boundary-long-diffValue-1-firefox-linux.png b/.../-visual-Legend-with-metrics-Verify-boundary-long-diffValue-1-firefox-linux.png
diff --git a/...s/-visual-Legend-with-metrics-Verify-boundary-long-diffValue-1-webkit-linux.png b/...s/-visual-Legend-with-metrics-Verify-boundary-long-diffValue-1-webkit-linux.png
diff --git a/...shots/-visual-Legend-with-metrics-Verify-boundary-patterns-1-chromium-linux.png b/...shots/-visual-Legend-with-metrics-Verify-boundary-patterns-1-chromium-linux.png
diff --git a/...pshots/-visual-Legend-with-metrics-Verify-boundary-patterns-1-firefox-linux.png b/...pshots/-visual-Legend-with-metrics-Verify-boundary-patterns-1-firefox-linux.png
diff --git a/...apshots/-visual-Legend-with-metrics-Verify-boundary-patterns-1-webkit-linux.png b/...apshots/-visual-Legend-with-metrics-Verify-boundary-patterns-1-webkit-linux.png
diff --git a/...cs-Verify-pairwise-1-icon-none-good-link-none-1-per-item-m-1-chromium-linux.png b/...cs-Verify-pairwise-1-icon-none-good-link-none-1-per-item-m-1-chromium-linux.png
diff --git a/...ics-Verify-pairwise-1-icon-none-good-link-none-1-per-item-m-1-firefox-linux.png b/...ics-Verify-pairwise-1-icon-none-good-link-none-1-per-item-m-1-firefox-linux.png
diff --git a/...rics-Verify-pairwise-1-icon-none-good-link-none-1-per-item-m-1-webkit-linux.png b/...rics-Verify-pairwise-1-icon-none-good-link-none-1-per-item-m-1-webkit-linux.png
diff --git a/...cs-Verify-pairwise-10-icon-down-bad-link-none-2-per-item-m-1-chromium-linux.png b/...cs-Verify-pairwise-10-icon-down-bad-link-none-2-per-item-m-1-chromium-linux.png
diff --git a/...ics-Verify-pairwise-10-icon-down-bad-link-none-2-per-item-m-1-firefox-linux.png b/...ics-Verify-pairwise-10-icon-down-bad-link-none-2-per-item-m-1-firefox-linux.png
diff --git a/...rics-Verify-pairwise-10-icon-down-bad-link-none-2-per-item-m-1-webkit-linux.png b/...rics-Verify-pairwise-10-icon-down-bad-link-none-2-per-item-m-1-webkit-linux.png
diff --git a/...ify-pairwise-11-icon-down-neutral-link-single-1-per-item-l-1-chromium-linux.png b/...ify-pairwise-11-icon-down-neutral-link-single-1-per-item-l-1-chromium-linux.png
diff --git a/...rify-pairwise-11-icon-down-neutral-link-single-1-per-item-l-1-firefox-linux.png b/...rify-pairwise-11-icon-down-neutral-link-single-1-per-item-l-1-firefox-linux.png
diff --git a/...erify-pairwise-11-icon-down-neutral-link-single-1-per-item-l-1-webkit-linux.png b/...erify-pairwise-11-icon-down-neutral-link-single-1-per-item-l-1-webkit-linux.png
diff --git a/...s-Verify-pairwise-12-icon-down-mixed-link-all-2-per-item-m-1-chromium-linux.png b/...s-Verify-pairwise-12-icon-down-mixed-link-all-2-per-item-m-1-chromium-linux.png
diff --git a/...cs-Verify-pairwise-12-icon-down-mixed-link-all-2-per-item-m-1-firefox-linux.png b/...cs-Verify-pairwise-12-icon-down-mixed-link-all-2-per-item-m-1-firefox-linux.png
diff --git a/...ics-Verify-pairwise-12-icon-down-mixed-link-all-2-per-item-m-1-webkit-linux.png b/...ics-Verify-pairwise-12-icon-down-mixed-link-all-2-per-item-m-1-webkit-linux.png
diff --git a/...-Verify-pairwise-13-icon-mixed-good-link-none-2-per-item-l-1-chromium-linux.png b/...-Verify-pairwise-13-icon-mixed-good-link-none-2-per-item-l-1-chromium-linux.png
diff --git a/...s-Verify-pairwise-13-icon-mixed-good-link-none-2-per-item-l-1-firefox-linux.png b/...s-Verify-pairwise-13-icon-mixed-good-link-none-2-per-item-l-1-firefox-linux.png
diff --git a/...cs-Verify-pairwise-13-icon-mixed-good-link-none-2-per-item-l-1-webkit-linux.png b/...cs-Verify-pairwise-13-icon-mixed-good-link-none-2-per-item-l-1-webkit-linux.png
diff --git a/...Verify-pairwise-14-icon-mixed-bad-link-single-1-per-item-m-1-chromium-linux.png b/...Verify-pairwise-14-icon-mixed-bad-link-single-1-per-item-m-1-chromium-linux.png
diff --git a/...-Verify-pairwise-14-icon-mixed-bad-link-single-1-per-item-m-1-firefox-linux.png b/...-Verify-pairwise-14-icon-mixed-bad-link-single-1-per-item-m-1-firefox-linux.png
diff --git a/...s-Verify-pairwise-14-icon-mixed-bad-link-single-1-per-item-m-1-webkit-linux.png b/...s-Verify-pairwise-14-icon-mixed-bad-link-single-1-per-item-m-1-webkit-linux.png
diff --git a/...erify-pairwise-15-icon-mixed-neutral-link-all-2-per-item-l-1-chromium-linux.png b/...erify-pairwise-15-icon-mixed-neutral-link-all-2-per-item-l-1-chromium-linux.png
diff --git a/...Verify-pairwise-15-icon-mixed-neutral-link-all-2-per-item-l-1-firefox-linux.png b/...Verify-pairwise-15-icon-mixed-neutral-link-all-2-per-item-l-1-firefox-linux.png
diff --git a/...-Verify-pairwise-15-icon-mixed-neutral-link-all-2-per-item-l-1-webkit-linux.png b/...-Verify-pairwise-15-icon-mixed-neutral-link-all-2-per-item-l-1-webkit-linux.png
diff --git a/...Verify-pairwise-16-icon-mixed-mixed-link-none-1-per-item-m-1-chromium-linux.png b/...Verify-pairwise-16-icon-mixed-mixed-link-none-1-per-item-m-1-chromium-linux.png
diff --git a/...-Verify-pairwise-16-icon-mixed-mixed-link-none-1-per-item-m-1-firefox-linux.png b/...-Verify-pairwise-16-icon-mixed-mixed-link-none-1-per-item-m-1-firefox-linux.png
diff --git a/...s-Verify-pairwise-16-icon-mixed-mixed-link-none-1-per-item-m-1-webkit-linux.png b/...s-Verify-pairwise-16-icon-mixed-mixed-link-none-1-per-item-m-1-webkit-linux.png
diff --git a/...s-Verify-pairwise-2-icon-none-bad-link-single-2-per-item-l-1-chromium-linux.png b/...s-Verify-pairwise-2-icon-none-bad-link-single-2-per-item-l-1-chromium-linux.png
diff --git a/...cs-Verify-pairwise-2-icon-none-bad-link-single-2-per-item-l-1-firefox-linux.png b/...cs-Verify-pairwise-2-icon-none-bad-link-single-2-per-item-l-1-firefox-linux.png
diff --git a/...ics-Verify-pairwise-2-icon-none-bad-link-single-2-per-item-l-1-webkit-linux.png b/...ics-Verify-pairwise-2-icon-none-bad-link-single-2-per-item-l-1-webkit-linux.png
diff --git a/...-Verify-pairwise-3-icon-none-neutral-link-all-1-per-item-m-1-chromium-linux.png b/...-Verify-pairwise-3-icon-none-neutral-link-all-1-per-item-m-1-chromium-linux.png
diff --git a/...s-Verify-pairwise-3-icon-none-neutral-link-all-1-per-item-m-1-firefox-linux.png b/...s-Verify-pairwise-3-icon-none-neutral-link-all-1-per-item-m-1-firefox-linux.png
diff --git a/...cs-Verify-pairwise-3-icon-none-neutral-link-all-1-per-item-m-1-webkit-linux.png b/...cs-Verify-pairwise-3-icon-none-neutral-link-all-1-per-item-m-1-webkit-linux.png
diff --git a/...s-Verify-pairwise-4-icon-none-mixed-link-none-2-per-item-l-1-chromium-linux.png b/...s-Verify-pairwise-4-icon-none-mixed-link-none-2-per-item-l-1-chromium-linux.png
diff --git a/...cs-Verify-pairwise-4-icon-none-mixed-link-none-2-per-item-l-1-firefox-linux.png b/...cs-Verify-pairwise-4-icon-none-mixed-link-none-2-per-item-l-1-firefox-linux.png
diff --git a/...ics-Verify-pairwise-4-icon-none-mixed-link-none-2-per-item-l-1-webkit-linux.png b/...ics-Verify-pairwise-4-icon-none-mixed-link-none-2-per-item-l-1-webkit-linux.png
diff --git a/...cs-Verify-pairwise-5-icon-up-good-link-single-2-per-item-m-1-chromium-linux.png b/...cs-Verify-pairwise-5-icon-up-good-link-single-2-per-item-m-1-chromium-linux.png
diff --git a/...ics-Verify-pairwise-5-icon-up-good-link-single-2-per-item-m-1-firefox-linux.png b/...ics-Verify-pairwise-5-icon-up-good-link-single-2-per-item-m-1-firefox-linux.png
diff --git a/...rics-Verify-pairwise-5-icon-up-good-link-single-2-per-item-m-1-webkit-linux.png b/...rics-Verify-pairwise-5-icon-up-good-link-single-2-per-item-m-1-webkit-linux.png
diff --git a/...etrics-Verify-pairwise-6-icon-up-bad-link-all-1-per-item-l-1-chromium-linux.png b/...etrics-Verify-pairwise-6-icon-up-bad-link-all-1-per-item-l-1-chromium-linux.png
diff --git a/...metrics-Verify-pairwise-6-icon-up-bad-link-all-1-per-item-l-1-firefox-linux.png b/...metrics-Verify-pairwise-6-icon-up-bad-link-all-1-per-item-l-1-firefox-linux.png
diff --git a/...-metrics-Verify-pairwise-6-icon-up-bad-link-all-1-per-item-l-1-webkit-linux.png b/...-metrics-Verify-pairwise-6-icon-up-bad-link-all-1-per-item-l-1-webkit-linux.png
diff --git a/...s-Verify-pairwise-7-icon-up-neutral-link-none-2-per-item-m-1-chromium-linux.png b/...s-Verify-pairwise-7-icon-up-neutral-link-none-2-per-item-m-1-chromium-linux.png
diff --git a/...cs-Verify-pairwise-7-icon-up-neutral-link-none-2-per-item-m-1-firefox-linux.png b/...cs-Verify-pairwise-7-icon-up-neutral-link-none-2-per-item-m-1-firefox-linux.png
diff --git a/...ics-Verify-pairwise-7-icon-up-neutral-link-none-2-per-item-m-1-webkit-linux.png b/...ics-Verify-pairwise-7-icon-up-neutral-link-none-2-per-item-m-1-webkit-linux.png
diff --git a/...s-Verify-pairwise-8-icon-up-mixed-link-single-1-per-item-l-1-chromium-linux.png b/...s-Verify-pairwise-8-icon-up-mixed-link-single-1-per-item-l-1-chromium-linux.png
diff --git a/...cs-Verify-pairwise-8-icon-up-mixed-link-single-1-per-item-l-1-firefox-linux.png b/...cs-Verify-pairwise-8-icon-up-mixed-link-single-1-per-item-l-1-firefox-linux.png
diff --git a/...ics-Verify-pairwise-8-icon-up-mixed-link-single-1-per-item-l-1-webkit-linux.png b/...ics-Verify-pairwise-8-icon-up-mixed-link-single-1-per-item-l-1-webkit-linux.png
diff --git a/...ics-Verify-pairwise-9-icon-down-good-link-all-1-per-item-l-1-chromium-linux.png b/...ics-Verify-pairwise-9-icon-down-good-link-all-1-per-item-l-1-chromium-linux.png
diff --git a/...rics-Verify-pairwise-9-icon-down-good-link-all-1-per-item-l-1-firefox-linux.png b/...rics-Verify-pairwise-9-icon-down-good-link-all-1-per-item-l-1-firefox-linux.png
diff --git a/...trics-Verify-pairwise-9-icon-down-good-link-all-1-per-item-l-1-webkit-linux.png b/...trics-Verify-pairwise-9-icon-down-good-link-all-1-per-item-l-1-webkit-linux.png
diff --git a/...-pairwise-7-Pattern-no-addon-m-column-patterns-highlight-0-1-chromium-linux.png b/...-pairwise-7-Pattern-no-addon-m-column-patterns-highlight-0-1-chromium-linux.png
diff --git a/...y-pairwise-7-Pattern-no-addon-m-column-patterns-highlight-0-1-firefox-linux.png b/...y-pairwise-7-Pattern-no-addon-m-column-patterns-highlight-0-1-firefox-linux.png
diff --git a/...fy-pairwise-7-Pattern-no-addon-m-column-patterns-highlight-0-1-webkit-linux.png b/...fy-pairwise-7-Pattern-no-addon-m-column-patterns-highlight-0-1-webkit-linux.png
diff --git a/...erify-pairwise-9-Pattern-suffix-m-row-patterns-highlight-0-1-chromium-linux.png b/...erify-pairwise-9-Pattern-suffix-m-row-patterns-highlight-0-1-chromium-linux.png
diff --git a/...Verify-pairwise-9-Pattern-suffix-m-row-patterns-highlight-0-1-firefox-linux.png b/...Verify-pairwise-9-Pattern-suffix-m-row-patterns-highlight-0-1-firefox-linux.png
diff --git a/...-Verify-pairwise-9-Pattern-suffix-m-row-patterns-highlight-0-1-webkit-linux.png b/...-Verify-pairwise-9-Pattern-suffix-m-row-patterns-highlight-0-1-webkit-linux.png
diff --git a/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx b/semcore/d3-chart/__tests__/cigarette-chart.browser-test.tsx
@@ -372,7 +372,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
     await test.step('Verify the placeholder uses the null palette color', async () => {
       await expect(locators.barItem(page, 0)).toHaveAttribute(
         'color',
-        '--intergalactic-chart-palette-order-null',
+        '--intergalactic-chart-data-null',
       );
     });
 

diff --git a/.../-visual-Reference-Lines-Verify-attributes-reference-lines-1-chromium-linux.png b/.../-visual-Reference-Lines-Verify-attributes-reference-lines-1-chromium-linux.png
diff --git a/...s/-visual-Reference-Lines-Verify-attributes-reference-lines-1-firefox-linux.png b/...s/-visual-Reference-Lines-Verify-attributes-reference-lines-1-firefox-linux.png
diff --git a/...ts/-visual-Reference-Lines-Verify-attributes-reference-lines-1-webkit-linux.png b/...ts/-visual-Reference-Lines-Verify-attributes-reference-lines-1-webkit-linux.png
diff --git a/...sual-Verify-donut-chart-Patterns-patterns-enabled-no-tooltip-1-webkit-linux.png b/...sual-Verify-donut-chart-Patterns-patterns-enabled-no-tooltip-1-webkit-linux.png
diff --git a/...sual-Verify-donut-chart-Patterns-patterns-enabled-no-tooltip-2-webkit-linux.png b/...sual-Verify-donut-chart-Patterns-patterns-enabled-no-tooltip-2-webkit-linux.png
diff --git a/...ots/-visual-Verify-donut-controlled-highlight-interactions-1-chromium-linux.png b/...ots/-visual-Verify-donut-controlled-highlight-interactions-1-chromium-linux.png
diff --git a/...t.tsx-snapshots/-visual-Verify-reference-line-with-area-52-1-chromium-linux.png b/...t.tsx-snapshots/-visual-Verify-reference-line-with-area-52-1-chromium-linux.png
diff --git a/...s/-visual-Verify-reference-pairwise-1-bad-middle-no-titles-1-chromium-linux.png b/...s/-visual-Verify-reference-pairwise-1-bad-middle-no-titles-1-chromium-linux.png
diff --git a/...ence-pairwise-10-bad-right-title-plain-line-outside-narrow-1-chromium-linux.png b/...ence-pairwise-10-bad-right-title-plain-line-outside-narrow-1-chromium-linux.png
diff --git a/...isual-Verify-reference-pairwise-11-insight-right-no-titles-1-chromium-linux.png b/...isual-Verify-reference-pairwise-11-insight-right-no-titles-1-chromium-linux.png
diff --git a/...ference-pairwise-12-good-middle-long-title-subTitle-narrow-1-chromium-linux.png b/...ference-pairwise-12-good-middle-long-title-subTitle-narrow-1-chromium-linux.png
diff --git a/...eference-pairwise-12-good-middle-long-title-subTitle-narrow-1-firefox-linux.png b/...eference-pairwise-12-good-middle-long-title-subTitle-narrow-1-firefox-linux.png
diff --git a/...reference-pairwise-12-good-middle-long-title-subTitle-narrow-1-webkit-linux.png b/...reference-pairwise-12-good-middle-long-title-subTitle-narrow-1-webkit-linux.png
diff --git a/...e-pairwise-3-insight-left-titles-plain-line-outside-narrow-1-chromium-linux.png b/...e-pairwise-3-insight-left-titles-plain-line-outside-narrow-1-chromium-linux.png
diff --git a/...erify-reference-pairwise-4-neutral-right-long-title-narrow-1-chromium-linux.png b/...erify-reference-pairwise-4-neutral-right-long-title-narrow-1-chromium-linux.png
diff --git a/...Verify-reference-pairwise-4-neutral-right-long-title-narrow-1-firefox-linux.png b/...Verify-reference-pairwise-4-neutral-right-long-title-narrow-1-firefox-linux.png
diff --git a/...-Verify-reference-pairwise-4-neutral-right-long-title-narrow-1-webkit-linux.png b/...-Verify-reference-pairwise-4-neutral-right-long-title-narrow-1-webkit-linux.png
diff --git a/...-pairwise-5-neutral-middle-subTitle-only-plain-line-inside-1-chromium-linux.png b/...-pairwise-5-neutral-middle-subTitle-only-plain-line-inside-1-chromium-linux.png
diff --git a/...e-pairwise-6-insight-middle-title-line-area-outside-narrow-1-chromium-linux.png b/...e-pairwise-6-insight-middle-title-line-area-outside-narrow-1-chromium-linux.png
diff --git a/...ce-pairwise-7-good-left-no-titles-plain-line-inside-narrow-1-chromium-linux.png b/...ce-pairwise-7-good-left-no-titles-plain-line-inside-narrow-1-chromium-linux.png
diff --git a/...e-pairwise-8-bad-left-long-title-subTitle-line-area-inside-1-chromium-linux.png b/...e-pairwise-8-bad-left-long-title-subTitle-line-area-inside-1-chromium-linux.png
diff --git a/...ce-pairwise-8-bad-left-long-title-subTitle-line-area-inside-1-firefox-linux.png b/...ce-pairwise-8-bad-left-long-title-subTitle-line-area-inside-1-firefox-linux.png
diff --git a/...nce-pairwise-8-bad-left-long-title-subTitle-line-area-inside-1-webkit-linux.png b/...nce-pairwise-8-bad-left-long-title-subTitle-line-area-inside-1-webkit-linux.png
diff --git a/...ts/-visual-Verify-reference-pairwise-9-neutral-left-titles-1-chromium-linux.png b/...ts/-visual-Verify-reference-pairwise-9-neutral-left-titles-1-chromium-linux.png
diff --git a/.../-visual-Verify-several-reference-lines-passed-as-an-array-1-chromium-linux.png b/.../-visual-Verify-several-reference-lines-passed-as-an-array-1-chromium-linux.png
diff --git a/...tsx-snapshots/-visual-Verify-area-default-props-looks-good-1-chromium-linux.png b/...tsx-snapshots/-visual-Verify-area-default-props-looks-good-1-chromium-linux.png
diff --git a/....tsx-snapshots/-visual-Verify-area-default-props-looks-good-1-firefox-linux.png b/....tsx-snapshots/-visual-Verify-area-default-props-looks-good-1-firefox-linux.png
diff --git a/...t.tsx-snapshots/-visual-Verify-area-default-props-looks-good-1-webkit-linux.png b/...t.tsx-snapshots/-visual-Verify-area-default-props-looks-good-1-webkit-linux.png
diff --git a/...-visual-Verify-area-with-empty-line-renders-and-looks-good-1-chromium-linux.png b/...-visual-Verify-area-with-empty-line-renders-and-looks-good-1-chromium-linux.png
diff --git a/.../-visual-Verify-area-with-empty-line-renders-and-looks-good-1-firefox-linux.png b/.../-visual-Verify-area-with-empty-line-renders-and-looks-good-1-firefox-linux.png
diff --git a/...s/-visual-Verify-area-with-empty-line-renders-and-looks-good-1-webkit-linux.png b/...s/-visual-Verify-area-with-empty-line-renders-and-looks-good-1-webkit-linux.png
diff --git a/...chart.browser-test.tsx-snapshots/-visual-Verify-curve-prop-1-chromium-linux.png b/...chart.browser-test.tsx-snapshots/-visual-Verify-curve-prop-1-chromium-linux.png
diff --git a/...sual-Verify-forecast-potential-and-highlighted-dots-render-1-chromium-linux.png b/...sual-Verify-forecast-potential-and-highlighted-dots-render-1-chromium-linux.png
diff --git a/...isual-Verify-forecast-potential-and-highlighted-dots-render-1-firefox-linux.png b/...isual-Verify-forecast-potential-and-highlighted-dots-render-1-firefox-linux.png
diff --git a/...visual-Verify-forecast-potential-and-highlighted-dots-render-1-webkit-linux.png b/...visual-Verify-forecast-potential-and-highlighted-dots-render-1-webkit-linux.png
diff --git a/...-line-chart-with-config-All-features-enabled-standard-size-1-chromium-linux.png b/...-line-chart-with-config-All-features-enabled-standard-size-1-chromium-linux.png
diff --git a/...ual-Verify-line-chart-with-config-No-legend-mixed-features-1-chromium-linux.png b/...ual-Verify-line-chart-with-config-No-legend-mixed-features-1-chromium-linux.png
diff --git a/...Verify-patterns-and-symbols-for-dots-keyboard-interactions-1-chromium-linux.png b/...Verify-patterns-and-symbols-for-dots-keyboard-interactions-1-chromium-linux.png
diff --git a/...er-test.tsx-snapshots/-visual-Verify-legend-and-pattern-fill-1-webkit-linux.png b/...er-test.tsx-snapshots/-visual-Verify-legend-and-pattern-fill-1-webkit-linux.png
diff --git a/semcore/d3-chart/src/component/Chart/CigaretteChart.tsx b/semcore/d3-chart/src/component/Chart/CigaretteChart.tsx
@@ -275,7 +275,7 @@ class CigaretteChartComponent extends AbstractChart<
               hide={false}
               duration={duration}
               r={r}
-              color='--intergalactic-chart-palette-order-null'
+              color='--intergalactic-chart-data-null'
               patterns={patterns}
               direction={invertAxis ? 'horizontal' : 'vertical'}
               hovered={false}

diff --git a/semcore/d3-chart/src/style/area.shadow.css b/semcore/d3-chart/src/style/area.shadow.css
@@ -43,7 +43,7 @@ SAreaLine {
 
 SNull {
   fill: transparent;
-  stroke: var(--intergalactic-chart-palette-order-null, oklch(0.9 0.009 234));
+  stroke: var(--intergalactic-chart-data-null, oklch(0.9 0.009 234));
   stroke-dasharray: 4;
 }
 

diff --git a/semcore/d3-chart/src/style/donut.shadow.css b/semcore/d3-chart/src/style/donut.shadow.css
@@ -18,7 +18,7 @@ SPie[transparent] {
 }
 
 SEmptyData {
-  fill: var(--intergalactic-chart-palette-order-null, oklch(0.9 0.009 234));
+  fill: var(--intergalactic-chart-data-null, oklch(0.9 0.009 234));
 }
 
 SEmptyData[color] {

diff --git a/semcore/d3-chart/src/style/line.shadow.css b/semcore/d3-chart/src/style/line.shadow.css
@@ -21,7 +21,7 @@ SLine[transparent] {
 
 SNull {
   fill: transparent;
-  stroke: var(--intergalactic-chart-palette-order-null, oklch(0.9 0.009 234));
+  stroke: var(--intergalactic-chart-data-null, oklch(0.9 0.009 234));
   stroke-dasharray: 4;
 }
 

diff --git a/...e-with-316f3-r-chart-palette-order-4-baseBgColor-undefined-1-chromium-linux.png b/...e-with-316f3-r-chart-palette-order-4-baseBgColor-undefined-1-chromium-linux.png
diff --git a/...ue-with-316f3-r-chart-palette-order-4-baseBgColor-undefined-1-firefox-linux.png b/...ue-with-316f3-r-chart-palette-order-4-baseBgColor-undefined-1-firefox-linux.png
diff --git a/...rue-with-316f3-r-chart-palette-order-4-baseBgColor-undefined-1-webkit-linux.png b/...rue-with-316f3-r-chart-palette-order-4-baseBgColor-undefined-1-webkit-linux.png
diff --git a/...-Verify-with-value-0-color-undefined-baseBgColor-undefined-1-chromium-linux.png b/...-Verify-with-value-0-color-undefined-baseBgColor-undefined-1-chromium-linux.png
diff --git a/...s-Verify-with-value-0-color-undefined-baseBgColor-undefined-1-firefox-linux.png b/...s-Verify-with-value-0-color-undefined-baseBgColor-undefined-1-firefox-linux.png
diff --git a/...ts-Verify-with-value-0-color-undefined-baseBgColor-undefined-1-webkit-linux.png b/...ts-Verify-with-value-0-color-undefined-baseBgColor-undefined-1-webkit-linux.png
diff --git a/...h-valu-2a10f-e-order-16-baseBgColor-chart-palette-order-14-1-chromium-linux.png b/...h-valu-2a10f-e-order-16-baseBgColor-chart-palette-order-14-1-chromium-linux.png
diff --git a/...th-valu-2a10f-e-order-16-baseBgColor-chart-palette-order-14-1-firefox-linux.png b/...th-valu-2a10f-e-order-16-baseBgColor-chart-palette-order-14-1-firefox-linux.png
diff --git a/...ith-valu-2a10f-e-order-16-baseBgColor-chart-palette-order-14-1-webkit-linux.png b/...ith-valu-2a10f-e-order-16-baseBgColor-chart-palette-order-14-1-webkit-linux.png
diff --git a/...h-valu-39a15-2-chart-palette-order-3-baseBgColor-undefined-1-chromium-linux.png b/...h-valu-39a15-2-chart-palette-order-3-baseBgColor-undefined-1-chromium-linux.png
diff --git a/...th-valu-39a15-2-chart-palette-order-3-baseBgColor-undefined-1-firefox-linux.png b/...th-valu-39a15-2-chart-palette-order-3-baseBgColor-undefined-1-firefox-linux.png
diff --git a/...ith-valu-39a15-2-chart-palette-order-3-baseBgColor-undefined-1-webkit-linux.png b/...ith-valu-39a15-2-chart-palette-order-3-baseBgColor-undefined-1-webkit-linux.png
diff --git a/...h-valu-3ed84--undefined-baseBgColor-chart-palette-order-14-1-chromium-linux.png b/...h-valu-3ed84--undefined-baseBgColor-chart-palette-order-14-1-chromium-linux.png
diff --git a/...th-valu-3ed84--undefined-baseBgColor-chart-palette-order-14-1-firefox-linux.png b/...th-valu-3ed84--undefined-baseBgColor-chart-palette-order-14-1-firefox-linux.png
diff --git a/...ith-valu-3ed84--undefined-baseBgColor-chart-palette-order-14-1-webkit-linux.png b/...ith-valu-3ed84--undefined-baseBgColor-chart-palette-order-14-1-webkit-linux.png
diff --git a/...h-valu-4c582-2-chart-palette-order-3-baseBgColor-undefined-1-chromium-linux.png b/...h-valu-4c582-2-chart-palette-order-3-baseBgColor-undefined-1-chromium-linux.png
diff --git a/...th-valu-4c582-2-chart-palette-order-3-baseBgColor-undefined-1-firefox-linux.png b/...th-valu-4c582-2-chart-palette-order-3-baseBgColor-undefined-1-firefox-linux.png
diff --git a/...ith-valu-4c582-2-chart-palette-order-3-baseBgColor-undefined-1-webkit-linux.png b/...ith-valu-4c582-2-chart-palette-order-3-baseBgColor-undefined-1-webkit-linux.png
diff --git a/...nts-wi-5063a-te-order-3-baseBgColor-chart-palette-order-15-1-chromium-linux.png b/...nts-wi-5063a-te-order-3-baseBgColor-chart-palette-order-15-1-chromium-linux.png
diff --git a/...ents-wi-5063a-te-order-3-baseBgColor-chart-palette-order-15-1-firefox-linux.png b/...ents-wi-5063a-te-order-3-baseBgColor-chart-palette-order-15-1-firefox-linux.png
diff --git a/...ments-wi-5063a-te-order-3-baseBgColor-chart-palette-order-15-1-webkit-linux.png b/...ments-wi-5063a-te-order-3-baseBgColor-chart-palette-order-15-1-webkit-linux.png
diff --git a/...ments-w-292e5-r-undefined-baseBgColor-chart-palette-order-5-1-firefox-linux.png b/...ments-w-292e5-r-undefined-baseBgColor-chart-palette-order-5-1-firefox-linux.png
diff --git a/...gments-w-292e5-r-undefined-baseBgColor-chart-palette-order-5-1-webkit-linux.png b/...gments-w-292e5-r-undefined-baseBgColor-chart-palette-order-5-1-webkit-linux.png
diff --git a/...ments-w-c316a-r-chart-palette-order-4-baseBgColor-undefined-1-firefox-linux.png b/...ments-w-c316a-r-chart-palette-order-4-baseBgColor-undefined-1-firefox-linux.png
diff --git a/...gments-w-c316a-r-chart-palette-order-4-baseBgColor-undefined-1-webkit-linux.png b/...gments-w-c316a-r-chart-palette-order-4-baseBgColor-undefined-1-webkit-linux.png
diff --git a/...nts-wi-3a443-te-order-2-baseBgColor-chart-palette-order-16-1-chromium-linux.png b/...nts-wi-3a443-te-order-2-baseBgColor-chart-palette-order-16-1-chromium-linux.png
diff --git a/...ents-wi-3a443-te-order-2-baseBgColor-chart-palette-order-16-1-firefox-linux.png b/...ents-wi-3a443-te-order-2-baseBgColor-chart-palette-order-16-1-firefox-linux.png
diff --git a/...ments-wi-3a443-te-order-2-baseBgColor-chart-palette-order-16-1-webkit-linux.png b/...ments-wi-3a443-te-order-2-baseBgColor-chart-palette-order-16-1-webkit-linux.png
diff --git a/...egments-with-value-0-color-undefined-baseBgColor-undefined-1-chromium-linux.png b/...egments-with-value-0-color-undefined-baseBgColor-undefined-1-chromium-linux.png
diff --git a/...segments-with-value-0-color-undefined-baseBgColor-undefined-1-firefox-linux.png b/...segments-with-value-0-color-undefined-baseBgColor-undefined-1-firefox-linux.png
diff --git a/...-segments-with-value-0-color-undefined-baseBgColor-undefined-1-webkit-linux.png b/...-segments-with-value-0-color-undefined-baseBgColor-undefined-1-webkit-linux.png
diff --git a/...gments-w-0c75e-te-order-6-baseBgColor-chart-palette-order-14-1-webkit-linux.png b/...gments-w-0c75e-te-order-6-baseBgColor-chart-palette-order-14-1-webkit-linux.png
diff --git a/...ents-w-57703-te-order-6-baseBgColor-chart-palette-order-14-1-chromium-linux.png b/...ents-w-57703-te-order-6-baseBgColor-chart-palette-order-14-1-chromium-linux.png
diff --git a/...ments-w-57703-te-order-6-baseBgColor-chart-palette-order-14-1-firefox-linux.png b/...ments-w-57703-te-order-6-baseBgColor-chart-palette-order-14-1-firefox-linux.png
diff --git a/...gments-w-57703-te-order-6-baseBgColor-chart-palette-order-14-1-webkit-linux.png b/...gments-w-57703-te-order-6-baseBgColor-chart-palette-order-14-1-webkit-linux.png
diff --git a/...ents-w-775d4-te-order-3-baseBgColor-chart-palette-order-15-1-chromium-linux.png b/...ents-w-775d4-te-order-3-baseBgColor-chart-palette-order-15-1-chromium-linux.png
diff --git a/...ments-w-775d4-te-order-3-baseBgColor-chart-palette-order-15-1-firefox-linux.png b/...ments-w-775d4-te-order-3-baseBgColor-chart-palette-order-15-1-firefox-linux.png
diff --git a/...gments-w-775d4-te-order-3-baseBgColor-chart-palette-order-15-1-webkit-linux.png b/...gments-w-775d4-te-order-3-baseBgColor-chart-palette-order-15-1-webkit-linux.png
diff --git a/...ents-w-9e99c-r-chart-palette-order-4-baseBgColor-undefined-1-chromium-linux.png b/...ents-w-9e99c-r-chart-palette-order-4-baseBgColor-undefined-1-chromium-linux.png
diff --git a/...gments-w-9e99c-r-chart-palette-order-4-baseBgColor-undefined-1-webkit-linux.png b/...gments-w-9e99c-r-chart-palette-order-4-baseBgColor-undefined-1-webkit-linux.png
diff --git a/...ents-w-cce82-r-undefined-baseBgColor-chart-palette-order-5-1-chromium-linux.png b/...ents-w-cce82-r-undefined-baseBgColor-chart-palette-order-5-1-chromium-linux.png
diff --git a/...ments-w-cce82-r-undefined-baseBgColor-chart-palette-order-5-1-firefox-linux.png b/...ments-w-cce82-r-undefined-baseBgColor-chart-palette-order-5-1-firefox-linux.png
diff --git a/...gments-w-cce82-r-undefined-baseBgColor-chart-palette-order-5-1-webkit-linux.png b/...gments-w-cce82-r-undefined-baseBgColor-chart-palette-order-5-1-webkit-linux.png
diff --git a/...egments-with-value-0-color-undefined-baseBgColor-undefined-1-chromium-linux.png b/...egments-with-value-0-color-undefined-baseBgColor-undefined-1-chromium-linux.png
diff --git a/...segments-with-value-0-color-undefined-baseBgColor-undefined-1-firefox-linux.png b/...segments-with-value-0-color-undefined-baseBgColor-undefined-1-firefox-linux.png
diff --git a/...-segments-with-value-0-color-undefined-baseBgColor-undefined-1-webkit-linux.png b/...-segments-with-value-0-color-undefined-baseBgColor-undefined-1-webkit-linux.png
diff --git a/...ments-with-value-100-color-undefined-baseBgColor-undefined-1-chromium-linux.png b/...ments-with-value-100-color-undefined-baseBgColor-undefined-1-chromium-linux.png
diff --git a/...gments-with-value-100-color-undefined-baseBgColor-undefined-1-firefox-linux.png b/...gments-with-value-100-color-undefined-baseBgColor-undefined-1-firefox-linux.png
diff --git a/...egments-with-value-100-color-undefined-baseBgColor-undefined-1-webkit-linux.png b/...egments-with-value-100-color-undefined-baseBgColor-undefined-1-webkit-linux.png
diff --git a/...ments-with-value-120-color-undefined-baseBgColor-undefined-1-chromium-linux.png b/...ments-with-value-120-color-undefined-baseBgColor-undefined-1-chromium-linux.png
diff --git a/...gments-with-value-120-color-undefined-baseBgColor-undefined-1-firefox-linux.png b/...gments-with-value-120-color-undefined-baseBgColor-undefined-1-firefox-linux.png
diff --git a/...egments-with-value-120-color-undefined-baseBgColor-undefined-1-webkit-linux.png b/...egments-with-value-120-color-undefined-baseBgColor-undefined-1-webkit-linux.png
diff --git a/...test.tsx-snapshots/-visual-Trend-Bars-Verify-loading-false-1-chromium-linux.png b/...test.tsx-snapshots/-visual-Trend-Bars-Verify-loading-false-1-chromium-linux.png
diff --git a/...-test.tsx-snapshots/-visual-Trend-Bars-Verify-loading-false-1-firefox-linux.png b/...-test.tsx-snapshots/-visual-Trend-Bars-Verify-loading-false-1-firefox-linux.png
diff --git a/...r-test.tsx-snapshots/-visual-Trend-Bars-Verify-loading-false-1-webkit-linux.png b/...r-test.tsx-snapshots/-visual-Trend-Bars-Verify-loading-false-1-webkit-linux.png
diff --git a/...-test.tsx-snapshots/-visual-Trend-Bars-Verify-loading-true-1-chromium-linux.png b/...-test.tsx-snapshots/-visual-Trend-Bars-Verify-loading-true-1-chromium-linux.png
diff --git a/...r-test.tsx-snapshots/-visual-Trend-Bars-Verify-loading-true-1-firefox-linux.png b/...r-test.tsx-snapshots/-visual-Trend-Bars-Verify-loading-true-1-firefox-linux.png
diff --git a/...er-test.tsx-snapshots/-visual-Trend-Bars-Verify-loading-true-1-webkit-linux.png b/...er-test.tsx-snapshots/-visual-Trend-Bars-Verify-loading-true-1-webkit-linux.png
diff --git a/semcore/mini-chart/src/components/trend/Bar.tsx b/semcore/mini-chart/src/components/trend/Bar.tsx
@@ -75,7 +75,7 @@ class TrendBarRoot extends Trend<
           {...extractedAriaProps}
         >
           {this.data.map((barItem, index) => {
-            let color = resolveColor('chart-palette-order-other-data');
+            let color = resolveColor('chart-data-other-value');
 
             if (barItem.color) {
               color = resolveColor(barItem.color);

diff --git a/stories/components/d3-chart/docs/examples/bar-chart/trend-line.tsx b/stories/components/d3-chart/docs/examples/bar-chart/trend-line.tsx
@@ -34,7 +34,7 @@ const Demo = () => {
       <Line
         x='category'
         y='bar'
-        color='chart-palette-order-total-amount'
+        color='chart-data-total-amount'
         style={{ strokeWidth: 3, strokeDasharray: '6 6' }}
       >
         <Line.Dots display />

diff --git a/stories/components/d3-chart/tests/examples/chart-legend/legend-table-data.tsx b/stories/components/d3-chart/tests/examples/chart-legend/legend-table-data.tsx
@@ -25,7 +25,7 @@ const rows = [
   { id: 'item-3', label: 'Label', color: 'chart-palette-order-3', value: 27500 },
   { id: 'item-4', label: 'Label', color: 'chart-palette-order-4', value: 11100 },
   { id: 'item-5', label: 'Label', color: 'chart-palette-order-5', value: 2400 },
-  { id: 'other-data', label: 'Other data', color: 'chart-palette-order-other-data', value: 22800 },
+  { id: 'other-data', label: 'Other data', color: 'chart-data-other-value', value: 22800 },
 ];
 
 const total = rows.reduce((sum, row) => sum + row.value, 0);

diff --git a/tools/theme/src/theme.ts b/tools/theme/src/theme.ts
@@ -680,6 +680,18 @@ export const theme: Theme = {
         value: colors.red['300'].value,
         description: 'Color for the "Lost" data on the chart.',
       },
+      chart_data_null: {
+        value: colors.gray['100'].value,
+        description: 'Use it to show null value on the chart.',
+      },
+      chart_data_other_value: {
+        value: colors.gray['200'].value,
+        description: 'Use it to indicate voids, missing or some other data on the chart.',
+      },
+      chart_data_total_amount: {
+        value: colors.gray['400'].value,
+        description: 'Use it to show total value on the chart.',
+      },
       chart_data_intent_commercial: {
         value: colors.violet['300'].value,
         description: 'Color for the commercial data intent on the chart.',
@@ -868,18 +880,6 @@ export const theme: Theme = {
         value: colors.yellow['400'].value,
         description: '24 color in the default list of colors for charts.',
       },
-      chart_palette_order_null: {
-        value: colors.gray['100'].value,
-        description: 'Use it to show null value on the chart.',
-      },
-      chart_palette_order_other_data: {
-        value: colors.gray['200'].value,
-        description: 'Use it to indicate voids, missing or some other data on the chart.',
-      },
-      chart_palette_order_total_amount: {
-        value: colors.gray['400'].value,
-        description: 'Use it to show total value on the chart.',
-      },
       chart_x_axis_accent_data_start_tracking: {
         value: success.opaqueAt(L_BG_LIGHT),
         description: 'Background color for the "Start tracking" date on the X-axis of the chart grid.',
@@ -3386,6 +3386,13 @@ type SemanticColors = {
       critical: Value;
       lost: Value;
       new: Value;
+      total: {
+        amount: Value;
+      };
+      other: {
+        value: Value;
+      };
+      null: Value;
       intent: {
         informational: Value;
         navigational: Value;
@@ -3420,13 +3427,6 @@ type SemanticColors = {
         22: Value;
         23: Value;
         24: Value;
-        total: {
-          amount: Value;
-        };
-        other: {
-          data: Value;
-        };
-        null: Value;
       };
     };
     grid: {

diff --git a/website/docs/data-display/area-chart/area-chart.md b/website/docs/data-display/area-chart/area-chart.md
@@ -54,7 +54,7 @@ For detailed tooltip information, see [Chart principles](/data-display/d3-chart/
 
 ### One value
 
-Display dots by default for charts with a single data point. The line is dashed and colored with `--chart-palette-order-other-data`.
+Display dots by default for charts with a single data point. The line is dashed and colored with `--chart-data-other-value`.
 
 ![](static/one-dot-area-chart.png)
 

diff --git a/website/docs/data-display/color-palette/color-palette.md b/website/docs/data-display/color-palette/color-palette.md
@@ -155,15 +155,15 @@ const App = function (props) {
 
 #### Total amount
 
-Use `--intergalactic-chart-palette-order-total-amount` token to indicate total values.
+Use `--intergalactic-chart-data-total-amount` token to indicate total values.
 
 ::: react-view
 
 <script lang="tsx">
 import React from 'react';
 import Color from '@components/Color';
 
-const colors = ['--intergalactic-chart-palette-order-total-amount'] // totalAmount
+const colors = ['--intergalactic-chart-data-total-amount'] // totalAmount
 
 const App = function (props) {
   return (
@@ -186,15 +186,15 @@ const App = function (props) {
 
 #### Other data
 
-Use `--intergalactic-chart-palette-order-other-data` token to indicate voids, missing or some other data.
+Use `--intergalactic-chart-data-other-value` token to indicate voids, missing or some other data.
 
 ::: react-view
 
 <script lang="tsx">
 import React from 'react';
 import Color from '@components/Color';
 
-const colors = ['--intergalactic-chart-palette-order-other-data'] // otherData
+const colors = ['--intergalactic-chart-data-other-value'] // otherData
 
 const App = function (props) {
   return (
@@ -217,15 +217,15 @@ const App = function (props) {
 
 #### Null and n/a data
 
-Use `--intergalactic-chart-palette-order-null` token to indicate null or not available data when applicable (for example, in Donut chart).
+Use `--intergalactic-chart-data-null` token to indicate null or not available data when applicable (for example, in Donut chart).
 
 ::: react-view
 
 <script lang="tsx">
 import React from 'react';
 import Color from '@components/Color';
 
-const colors = ['--intergalactic-chart-palette-order-null'] // nullData
+const colors = ['--intergalactic-chart-data-null'] // nullData
 
 const App = function (props) {
   return (

diff --git a/website/docs/data-display/line-chart/line-chart.md b/website/docs/data-display/line-chart/line-chart.md
@@ -72,7 +72,7 @@ For detailed tooltip information, see [Chart principles](/data-display/d3-chart/
 
 ### One value
 
-Display dots by default for charts with a single data point. The line is dashed and colored with `--chart-palette-order-other-data`.
+Display dots by default for charts with a single data point. The line is dashed and colored with `--chart-data-other-value`.
 
 ![](static/one-dot-line-chart.png)
 

diff --git a/website/docs/data-display/stacked-area-chart/stacked-area-chart.md b/website/docs/data-display/stacked-area-chart/stacked-area-chart.md
@@ -59,7 +59,7 @@ For detailed tooltip information, see [Chart principles](/data-display/d3-chart/
 
 ### One value
 
-Display dots by default for charts with a single data point. The line is dashed and colored with `--chart-palette-order-other-data`.
+Display dots by default for charts with a single data point. The line is dashed and colored with `--chart-data-other-value`.
 
 ![one-dot](static/one-dot-stacked-area-chart.png)
 

diff --git a/website/docs/data-display/venn-chart/venn-chart.md b/website/docs/data-display/venn-chart/venn-chart.md
@@ -123,13 +123,13 @@ Zero counts as data. 0 ≠ n/a.
 
 ![](static/venn-null.png)
 
-If all data set values are zero, display a circle in `--chart-palette-order-null` color.
+If all data set values are zero, display a circle in `--chart-data-null` color.
 
 ![](static/venn-null-2.png)
 
 ### No data
 
-Exclude unavailable data from the chart, marking it as n/a in the legend. If all dataset values are unknown, show a circle in `--chart-palette-order-null` color.
+Exclude unavailable data from the chart, marking it as n/a in the legend. If all dataset values are unknown, show a circle in `--chart-data-null` color.
 
 ![](static/venn-na.png)