From 011d4a67d765e8fc1fe68daffeb9c6ffb3c0ca95 Mon Sep 17 00:00:00 2001
From: Julia Mnizhek <j.mnizhek@semrush.com>
Date: Fri, 28 Aug 2026 14:20:55 +0200
Subject: [PATCH 1/2] [d3-chart] update styles for legend and tooltip

---
 semcore/d3-chart/src/Dots.jsx                 |  4 +--
 .../LegendFlex/legend-flex.shadow.css         |  4 +--
 .../LegendItem/legend-item.shadow.css         | 18 +++++------
 .../LegendTable/legend-table.shadow.css       |  4 +--
 .../src/style/abstract-chart.shadow.css       |  2 +-
 semcore/d3-chart/src/style/dot.shadow.css     |  7 ++++-
 semcore/d3-chart/src/style/line.shadow.css    |  2 +-
 semcore/d3-chart/src/style/tooltip.shadow.css | 27 +++++++++++------
 tools/theme/src/theme.ts                      |  9 ++++++
 .../style/design-tokens/design-tokens.json    | 30 ++++++++++++++++---
 10 files changed, 76 insertions(+), 31 deletions(-)

diff --git a/semcore/d3-chart/src/Dots.jsx b/semcore/d3-chart/src/Dots.jsx
index 45cb3ef953..fda729d3d1 100644
--- a/semcore/d3-chart/src/Dots.jsx
+++ b/semcore/d3-chart/src/Dots.jsx
@@ -23,7 +23,7 @@ function Dots(props) {
     scale,
     duration = 500,
     transparent,
-    radius: radiusBase = 4,
+    radius: radiusBase = 3,
     resolveColor,
     patterns,
     onClick,
@@ -97,7 +97,7 @@ function Dots(props) {
       typeof display === 'function'
         ? display(i, i === activeIndex, !isPrev && !isNext)
         : display || i === activeIndex || (!isPrev && !isNext);
-    const radius = radiusBase * (active ? 5 / 4 : 1);
+    const radius = radiusBase * (active ? 4 / 3 : 1);
     if (!d3.defined()(d)) return acc;
     if (!visible) return acc;
 
diff --git a/semcore/d3-chart/src/component/ChartLegend/LegendFlex/legend-flex.shadow.css b/semcore/d3-chart/src/component/ChartLegend/LegendFlex/legend-flex.shadow.css
index 7e981a8a7a..f62bebd282 100644
--- a/semcore/d3-chart/src/component/ChartLegend/LegendFlex/legend-flex.shadow.css
+++ b/semcore/d3-chart/src/component/ChartLegend/LegendFlex/legend-flex.shadow.css
@@ -2,11 +2,11 @@ SLegendFlex[direction='row'] {
   align-items: flex-start;
   align-content: flex-start;
   flex-wrap: wrap;
-  gap: 8px 16px;
+  gap: var(--intergalactic-spacing-content-gap-large, 8px) var(--intergalactic-spacing-content-gap-xxlarge, 16px);
 }
 
 SLegendFlex[direction='column'] {
   align-items: flex-start;
   flex-wrap: wrap;
-  gap: 8px;
+  gap: var(--intergalactic-spacing-content-gap-large, 8px);
 }
diff --git a/semcore/d3-chart/src/component/ChartLegend/LegendItem/legend-item.shadow.css b/semcore/d3-chart/src/component/ChartLegend/LegendItem/legend-item.shadow.css
index 47bf705c45..9eebd442d0 100644
--- a/semcore/d3-chart/src/component/ChartLegend/LegendItem/legend-item.shadow.css
+++ b/semcore/d3-chart/src/component/ChartLegend/LegendItem/legend-item.shadow.css
@@ -13,7 +13,7 @@ SLegendItem[disabled]:hover {
 
 SPointShape[color] {
   background-color: var(--color);
-  margin-right: 8px;
+  margin-right: var(--intergalactic-spacing-content-gap-large, 8px);
   flex-shrink: 0;
 }
 
@@ -21,14 +21,14 @@ SPointShape[shape='Circle'][size='l'] {
   width: 16px;
   height: 16px;
   border-radius: 8px;
-  margin-top: 4px;
+  margin-top: var(--intergalactic-spacing-content-gap-small, 4px);
 }
 
 SPointShape[shape='Circle'][size='m'] {
   width: 12px;
   height: 12px;
   border-radius: 6px;
-  margin-top: 4px;
+  margin-top: var(--intergalactic-spacing-content-gap-small, 4px);
 }
 
 SPointShape[shape='Line'][size='l'] {
@@ -61,20 +61,20 @@ SPointShape[shape='Square'][size='m'] {
 
 SPointShape[shape='Pattern'] {
   background-color: transparent;
-  margin-right: 4px;
+  margin-right: var(--intergalactic-spacing-content-gap-small, 4px);
 }
 
 SIcon {
   line-height: 0;
-  margin-right: 4px;
+  margin-right: var(--intergalactic-spacing-content-gap-small, 4px);
 }
 
 SIcon[size='l'] {
-  margin-top: 4px;
+  margin-top: var(--intergalactic-spacing-content-gap-small, 4px);
 }
 
 SIcon[size='m'] {
-  margin-top: 2px;
+  margin-top: var(--intergalactic-spacing-content-gap-xsmall, 2px);
 }
 
 SLabel {
@@ -97,7 +97,7 @@ SCount[size='m'] {
 
 SAdditionalLabel,
 SCount {
-  margin-left: 4px;
+  margin-left: var(--intergalactic-spacing-content-gap-small, 4px);
 }
 
 SAdditionalLabel {
@@ -113,7 +113,7 @@ SAdditionalLabel::before {
   height: 4px;
   width: 4px;
   border-radius: 2px;
-  margin-right: 4px;
+  margin-right: var(--intergalactic-spacing-content-gap-small, 4px);
 }
 
 SAdditionalLabel[size='l']::before {
diff --git a/semcore/d3-chart/src/component/ChartLegend/LegendTable/legend-table.shadow.css b/semcore/d3-chart/src/component/ChartLegend/LegendTable/legend-table.shadow.css
index 0dc37cee29..e1c660ebdb 100644
--- a/semcore/d3-chart/src/component/ChartLegend/LegendTable/legend-table.shadow.css
+++ b/semcore/d3-chart/src/component/ChartLegend/LegendTable/legend-table.shadow.css
@@ -4,8 +4,8 @@ SLegendTable[columns-count] {
   grid-template-columns: auto 0.2fr;
   align-items: center;
   height: fit-content;
-  grid-column-gap: 16px;
-  grid-row-gap: 8px;
+  grid-column-gap: var(--intergalactic-spacing-content-gap-large, 8px);
+  grid-row-gap: var(--intergalactic-spacing-content-gap-large, 8px);
 }
 
 SColumnItem[size='l'] {
diff --git a/semcore/d3-chart/src/style/abstract-chart.shadow.css b/semcore/d3-chart/src/style/abstract-chart.shadow.css
index 124b8494cb..f743ccee04 100644
--- a/semcore/d3-chart/src/style/abstract-chart.shadow.css
+++ b/semcore/d3-chart/src/style/abstract-chart.shadow.css
@@ -7,7 +7,7 @@ SChart {
 
 STooltipChildrenWrapper {
   display: grid;
-  column-gap: var(--intergalactic-spacing-2x, 8px);
+  column-gap: var(--intergalactic-spacing-content-gap-large, 8px);
 
   &[columnsCount='2'] {
     grid-template-columns: auto minmax(28px, max-content);
diff --git a/semcore/d3-chart/src/style/dot.shadow.css b/semcore/d3-chart/src/style/dot.shadow.css
index b18b4d76f2..1cb05295f4 100644
--- a/semcore/d3-chart/src/style/dot.shadow.css
+++ b/semcore/d3-chart/src/style/dot.shadow.css
@@ -10,10 +10,15 @@ SDot {
   stroke-width: 1px;
   stroke: var(--intergalactic-chart-grid-border, #ffffff);
   fill: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 140));
-  transition-property: cx, cy, x, y;
+  transition-property: cx, cy, x, y, filter;
   transition-timing-function: ease-in-out;
 }
 
+SDot[active] {
+  box-shadow: var(--intergalactic-box-shadow-chart-dot-elevated, 0px 0px 1px 0px oklch(0.176 0.033 175.7 / 0.07), 0px 1px 3px 0px oklch(0.176 0.033 175.7 / 0.07));
+  filter: drop-shadow(0px 0px 1px oklch(0.176 0.033 175.7 / 0.07)) drop-shadow(0px 1px 3px oklch(0.176 0.033 175.7 / 0.07));
+}
+
 SDot[hide] {
   display: none;
 }
diff --git a/semcore/d3-chart/src/style/line.shadow.css b/semcore/d3-chart/src/style/line.shadow.css
index cc291b4b45..143f801827 100644
--- a/semcore/d3-chart/src/style/line.shadow.css
+++ b/semcore/d3-chart/src/style/line.shadow.css
@@ -2,7 +2,7 @@
 
 SLine {
   fill: transparent;
-  stroke-width: 3;
+  stroke-width: 2;
   stroke: var(--intergalactic-chart-palette-order-1, oklch(0.23 0.01 140));
   transition-property: d;
   transition-duration: var(--duration);
diff --git a/semcore/d3-chart/src/style/tooltip.shadow.css b/semcore/d3-chart/src/style/tooltip.shadow.css
index 0e5dc23996..ea339617eb 100644
--- a/semcore/d3-chart/src/style/tooltip.shadow.css
+++ b/semcore/d3-chart/src/style/tooltip.shadow.css
@@ -3,27 +3,34 @@
 STooltip {
   font-size: var(--intergalactic-fs-100, 12px);
   line-height: var(--intergalactic-lh-100, 133%);
+  font-variant-numeric: tabular-nums;
   position: relative;
-  background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0));
+  color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+  background-color: var(--intergalactic-tooltip-bg-invert, oklch(0.23 0.01 140));
   border-radius: var(--intergalactic-popper-rounded, 6px);
-  border: 1px solid var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07));
+  border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.35 0.006 140));
   box-sizing: border-box;
   box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.176 0.033 175.7 / 0.07));
-  padding: var(--intergalactic-spacing-3x, 12px);
+  padding: var(--intergalactic-spacing-content-padding-medium, 12px);
 }
 
 STitle {
-  color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
-  margin-bottom: var(--intergalactic-spacing-2x, 8px);
+  color: var(--intergalactic-text-secondary-invert, oklch(0.997 0.004 165.9 / 0.684));
+  margin-bottom: var(--intergalactic-spacing-content-gap-large, 8px);
 }
 
 SDotGroup {
   display: flex;
   align-items: center;
+  margin-bottom: var(--intergalactic-spacing-content-gap-large, 8px);
+}
+
+SDotGroup:last-of-type {
+  margin-bottom: 0;
 }
 
 SDot {
-  margin-right: var(--intergalactic-spacing-2x, 8px);
+  margin-right: var(--intergalactic-spacing-content-gap-large, 8px);
 }
 
 SDotCircle[color] {
@@ -31,12 +38,14 @@ SDotCircle[color] {
   width: 8px;
   height: 8px;
   border-radius: 50%;
+  border: 1px solid var(--intergalactic-chart-grid-border, #ffffff);
 }
 
 
 SFooter {
-  background: var(--intergalactic-bg-secondary-neutral, oklch(0.98 0.001 180));
-  padding: var(--intergalactic-spacing-1x, 4px) var(--intergalactic-spacing-3x, 12px);
+  background: var(--intergalactic-bg-secondary-invert, oklch(0.969 0.057 140 / 0.118));
+  color: var(--intergalactic-text-secondary-invert, oklch(0.997 0.004 165.9 / 0.684));
+  padding: var(--intergalactic-spacing-content-padding-xsmall, 4px) var(--intergalactic-spacing-content-padding-medium, 12px);
   border-radius: 0 0 var(--intergalactic-rounded-medium, 6px) var(--intergalactic-rounded-medium, 6px);
-  margin: var(--intergalactic-spacing-3x, 12px) calc(-1 * var(--intergalactic-spacing-3x, 12px)) calc(-1 * var(--intergalactic-spacing-3x, 12px));
+  margin: var(--intergalactic-spacing-content-gap-xlarge, 12px) calc(-1 * var(--intergalactic-spacing-content-gap-xlarge, 12px)) calc(-1 * var(--intergalactic-spacing-content-gap-xlarge, 12px));
 }
\ No newline at end of file
diff --git a/tools/theme/src/theme.ts b/tools/theme/src/theme.ts
index efa843eec2..7fc4441ecd 100644
--- a/tools/theme/src/theme.ts
+++ b/tools/theme/src/theme.ts
@@ -2005,6 +2005,10 @@ export const theme: Theme = {
         value: `3px 3px 10px 0px ${neutral.opaqueAt(L_BORDER_SECONDARY)}`,
         description: 'Hover state for the shadow of the Card with hover state.',
       },
+      box_shadow_chart_dot_elevated: {
+        value: `0px 0px 2px 0px ${neutral.opaqueAt(L_BORDER_PRIMARY)}, 0px 1px 2px 0px ${neutral.opaqueAt(L_BORDER_PRIMARY)}`,
+        description: 'Shadow of the elevated chart dot.',
+      },
       box_shadow_control_elevated: {
         value: `0px 0px 1px 0px ${neutral.opaqueAt(L_BORDER_SECONDARY)}, 0px 1px 3px 0px ${neutral.opaqueAt(L_BORDER_SECONDARY)}`,
         description: 'Shadow of the Switch toggle.',
@@ -3447,6 +3451,11 @@ type SemanticShadows = {
         DEFAULT: Value;
         hover: Value;
       };
+      chart: {
+        dot: {
+          elevated: Value;
+        };
+      };
       control: {
         elevated: Value;
       };
diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json
index e63ea7640c..80c604faed 100644
--- a/website/docs/style/design-tokens/design-tokens.json
+++ b/website/docs/style/design-tokens/design-tokens.json
@@ -357,7 +357,6 @@
     "components": [
       "accordion",
       "bulk-textarea",
-      "d3-chart",
       "drag-and-drop",
       "input",
       "notice",
@@ -384,7 +383,9 @@
     "name": "--intergalactic-bg-secondary-invert",
     "value": "oklch(0.969 0.057 140 / 0.118)",
     "description": "Inverted version of the secondary background of the interface which contains the main data and information.",
-    "components": []
+    "components": [
+      "d3-chart"
+    ]
   },
   {
     "name": "--intergalactic-bg-secondary-success",
@@ -3017,6 +3018,7 @@
     "value": "oklch(0.999 0.001 180 / 0.949)",
     "description": "Inverted version of the primary text.",
     "components": [
+      "d3-chart",
       "date-picker",
       "feature-highlight",
       "notice-bubble"
@@ -3049,7 +3051,9 @@
     "name": "--intergalactic-text-secondary-invert",
     "value": "oklch(0.997 0.004 165.9 / 0.684)",
     "description": "Inverted version of the secondary text.",
-    "components": []
+    "components": [
+      "d3-chart"
+    ]
   },
   {
     "name": "--intergalactic-text-success",
@@ -3077,6 +3081,7 @@
     "description": "Inverted version of the default Tooltip background.",
     "components": [
       "base-components",
+      "d3-chart",
       "tooltip"
     ]
   },
@@ -3094,6 +3099,7 @@
     "description": "Border of the Tooltip with dark theme.",
     "components": [
       "base-components",
+      "d3-chart",
       "tooltip"
     ]
   },
@@ -3208,6 +3214,14 @@
     "description": "Hover state for the shadow of the Card with hover state.",
     "components": []
   },
+  {
+    "name": "--intergalactic-box-shadow-chart-dot-elevated",
+    "value": "0px 0px 1px 0px oklch(0.176 0.033 175.7 / 0.07), 0px 1px 3px 0px oklch(0.176 0.033 175.7 / 0.07)",
+    "description": "Shadow of the elevated chart dot.",
+    "components": [
+      "d3-chart"
+    ]
+  },
   {
     "name": "--intergalactic-box-shadow-control-elevated",
     "value": "0px 0px 1px 0px oklch(0.176 0.033 175.7 / 0.07), 0px 1px 3px 0px oklch(0.176 0.033 175.7 / 0.07)",
@@ -3344,6 +3358,7 @@
       "base-components",
       "bulk-textarea",
       "counter",
+      "d3-chart",
       "dropdown",
       "dropdown-menu",
       "input-tags",
@@ -3384,6 +3399,7 @@
       "bulk-textarea",
       "button",
       "card",
+      "d3-chart",
       "dropdown",
       "fullscreen-modal",
       "input",
@@ -3443,7 +3459,9 @@
     "name": "--intergalactic-spacing-content-gap-xsmall",
     "value": "2px",
     "description": "Extra small gap between content elements inside controls, rows, or columns.",
-    "components": []
+    "components": [
+      "d3-chart"
+    ]
   },
   {
     "name": "--intergalactic-spacing-content-gap-small",
@@ -3452,6 +3470,7 @@
     "components": [
       "base-trigger",
       "bulk-textarea",
+      "d3-chart",
       "date-picker",
       "dropdown-menu",
       "inline-input",
@@ -3487,6 +3506,7 @@
       "breadcrumbs",
       "button",
       "checkbox",
+      "d3-chart",
       "date-picker",
       "dropdown",
       "fullscreen-modal",
@@ -3502,6 +3522,7 @@
     "value": "12px",
     "description": "Extra large gap between elements, rows, or columns.",
     "components": [
+      "d3-chart",
       "fullscreen-modal",
       "notice-bubble",
       "pagination"
@@ -3512,6 +3533,7 @@
     "value": "16px",
     "description": "2x large gap between elements, rows, or columns.",
     "components": [
+      "d3-chart",
       "pagination",
       "tab-line"
     ]

From 651a6caedd9b2a82a10d124bb539f4ff01eb8d89 Mon Sep 17 00:00:00 2001
From: Julia Mnizhek <j.mnizhek@semrush.com>
Date: Fri, 28 Aug 2026 17:14:09 +0200
Subject: [PATCH 2/2] [d3-chart] update value for invert tooltip border

---
 .../src/components/hint/style/hint.shadow.css    |  2 +-
 semcore/d3-chart/src/style/dot.shadow.css        |  2 +-
 semcore/d3-chart/src/style/tooltip.shadow.css    |  2 +-
 semcore/tag/src/style/tag.shadow.css             |  2 +-
 semcore/tooltip/src/style/tooltip.shadow.css     |  4 ++--
 tools/theme/src/colors/index.ts                  |  2 +-
 tools/theme/src/theme.ts                         |  9 +++++++--
 .../docs/style/design-tokens/base-tokens.json    |  2 +-
 .../docs/style/design-tokens/design-tokens.json  | 16 +++++++++++-----
 9 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/semcore/base-components/src/components/hint/style/hint.shadow.css b/semcore/base-components/src/components/hint/style/hint.shadow.css
index 63c65c796f..2824a37f7d 100644
--- a/semcore/base-components/src/components/hint/style/hint.shadow.css
+++ b/semcore/base-components/src/components/hint/style/hint.shadow.css
@@ -9,7 +9,7 @@ SHintPopper {
   pointer-events: none;
 
   background: var(--intergalactic-tooltip-bg-invert, oklch(0.23 0.01 140));
-  border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.35 0.006 140));
+  border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.4 0.004 140));
   color: var(--intergalactic-tooltip-text-invert, oklch(0.999 0.001 180 / 0.949));
   padding: var(--intergalactic-spacing-content-padding-xsmall, 4px) var(--intergalactic-spacing-content-padding-small, 8px);
   border-radius: var(--intergalactic-rounded-small, 4px);
diff --git a/semcore/d3-chart/src/style/dot.shadow.css b/semcore/d3-chart/src/style/dot.shadow.css
index 1cb05295f4..32599fe724 100644
--- a/semcore/d3-chart/src/style/dot.shadow.css
+++ b/semcore/d3-chart/src/style/dot.shadow.css
@@ -15,7 +15,7 @@ SDot {
 }
 
 SDot[active] {
-  box-shadow: var(--intergalactic-box-shadow-chart-dot-elevated, 0px 0px 1px 0px oklch(0.176 0.033 175.7 / 0.07), 0px 1px 3px 0px oklch(0.176 0.033 175.7 / 0.07));
+  box-shadow: var(--intergalactic-box-shadow-chart-dot-elevated, 0px 0px 2px 0px oklch(0.137 0.026 175.7 / 0.161), 0px 1px 2px 0px oklch(0.137 0.026 175.7 / 0.161));
   filter: drop-shadow(0px 0px 1px oklch(0.176 0.033 175.7 / 0.07)) drop-shadow(0px 1px 3px oklch(0.176 0.033 175.7 / 0.07));
 }
 
diff --git a/semcore/d3-chart/src/style/tooltip.shadow.css b/semcore/d3-chart/src/style/tooltip.shadow.css
index ea339617eb..2d86f0dda2 100644
--- a/semcore/d3-chart/src/style/tooltip.shadow.css
+++ b/semcore/d3-chart/src/style/tooltip.shadow.css
@@ -8,7 +8,7 @@ STooltip {
   color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
   background-color: var(--intergalactic-tooltip-bg-invert, oklch(0.23 0.01 140));
   border-radius: var(--intergalactic-popper-rounded, 6px);
-  border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.35 0.006 140));
+  border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.4 0.004 140));
   box-sizing: border-box;
   box-shadow: var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px oklch(0.176 0.033 175.7 / 0.07));
   padding: var(--intergalactic-spacing-content-padding-medium, 12px);
diff --git a/semcore/tag/src/style/tag.shadow.css b/semcore/tag/src/style/tag.shadow.css
index 4c8c8541d5..1b45776c0e 100644
--- a/semcore/tag/src/style/tag.shadow.css
+++ b/semcore/tag/src/style/tag.shadow.css
@@ -220,7 +220,7 @@ STag[theme="secondary-invert"],
 STagContainerClose[theme="secondary-invert"] {
   background-color: var(--intergalactic-tag-secondary-bg-invert-normal, transparent);
   color: var(--intergalactic-tag-secondary-text-invert, oklch(0.997 0.004 165.9 / 0.684));
-  border-color: var(--intergalactic-tag-secondary-border-invert, oklch(0.989 0.019 140 / 0.232));
+  border-color: var(--intergalactic-tag-secondary-border-invert, oklch(0.994 0.011 140 / 0.283));
 
   &::before,
   &::after {
diff --git a/semcore/tooltip/src/style/tooltip.shadow.css b/semcore/tooltip/src/style/tooltip.shadow.css
index ae1b7b9452..1fc83a56d7 100644
--- a/semcore/tooltip/src/style/tooltip.shadow.css
+++ b/semcore/tooltip/src/style/tooltip.shadow.css
@@ -22,7 +22,7 @@ STooltip {
 STooltip[theme='invert'] {
   color: var(--intergalactic-tooltip-text-invert, oklch(0.999 0.001 180 / 0.949));
   background-color: var(--intergalactic-tooltip-bg-invert, oklch(0.23 0.01 140));
-  border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.35 0.006 140));
+  border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.4 0.004 140));
 }
 
 STooltip[theme='warning'] {
@@ -52,7 +52,7 @@ SArrow {
 }
 
 SArrow[theme='invert'] {
-  border-color: var(--intergalactic-tooltip-border-invert, oklch(0.35 0.006 140));
+  border-color: var(--intergalactic-tooltip-border-invert, oklch(0.4 0.004 140));
 
   &::before {
     border-color: var(--intergalactic-tooltip-bg-invert, oklch(0.23 0.01 140));
diff --git a/tools/theme/src/colors/index.ts b/tools/theme/src/colors/index.ts
index 4f114cfada..5765ec7e39 100644
--- a/tools/theme/src/colors/index.ts
+++ b/tools/theme/src/colors/index.ts
@@ -280,4 +280,4 @@ export const L_INV_ICON_SECONDARY = 0.45;
 /** Border primary    | ⚠️ APCA 15+ on secondary bg */
 export const L_INV_BORDER_PRIMARY = 0.46; // inputs, buttons, spin
 /** Border secondary */
-export const L_INV_BORDER_SECONDARY = 0.35;
+export const L_INV_BORDER_SECONDARY = 0.4;
diff --git a/tools/theme/src/theme.ts b/tools/theme/src/theme.ts
index 7fc4441ecd..89e4b2c483 100644
--- a/tools/theme/src/theme.ts
+++ b/tools/theme/src/theme.ts
@@ -735,9 +735,9 @@ export const theme: Theme = {
       chart_palette_order_8: {
         value: colors.mint['200'].value,
         description: '8 color in the default list of colors for charts.',
-      }, // stopped here
+      },
       chart_palette_order_9: {
-        value: colors.blue['400'].value,
+        value: colors.blue['500'].value,
         description: '9 color in the default list of colors for charts.',
       },
       chart_palette_order_10: {
@@ -820,6 +820,10 @@ export const theme: Theme = {
         value: neutral.opaqueAt(L_BG_LIGHT),
         description: 'Background color for the clickable date on the X-axis of the chart grid.',
       },
+      chart_x_axis_accent_tick: {
+        value: neutral.at(L_BG_SECONDARY_ACTIVE),
+        description: 'Background color for the accent tick on the X-axis.',
+      },
       control_checkbox_bg_normal: {
         value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}',
         description: 'Background color of the Checkbox.',
@@ -3337,6 +3341,7 @@ type SemanticColors = {
     x: {
       axis: {
         accent: {
+          tick: Value;
           period: {
             active: Value;
           };
diff --git a/website/docs/style/design-tokens/base-tokens.json b/website/docs/style/design-tokens/base-tokens.json
index 735ea754a7..b2e477697e 100644
--- a/website/docs/style/design-tokens/base-tokens.json
+++ b/website/docs/style/design-tokens/base-tokens.json
@@ -877,7 +877,7 @@
   },
   {
     "name": "--intergalactic-border-tooltip-invert",
-    "value": "oklch(0.35 0.006 140)"
+    "value": "oklch(0.4 0.004 140)"
   },
   {
     "name": "--intergalactic-border-table-accent",
diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json
index 80c604faed..3a1d315ed2 100644
--- a/website/docs/style/design-tokens/design-tokens.json
+++ b/website/docs/style/design-tokens/design-tokens.json
@@ -539,7 +539,7 @@
   },
   {
     "name": "--intergalactic-border-secondary-invert",
-    "value": "oklch(0.989 0.019 140 / 0.232)",
+    "value": "oklch(0.994 0.011 140 / 0.283)",
     "description": "Inverted version of the neutral secondary border. Use it for borders on the dark or color background.",
     "components": []
   },
@@ -796,7 +796,7 @@
   },
   {
     "name": "--intergalactic-chart-palette-order-9",
-    "value": "oklch(0.58 0.168 278.2)",
+    "value": "oklch(0.53 0.157 279.2)",
     "description": "9 color in the default list of colors for charts.",
     "components": [
       "d3-chart"
@@ -924,6 +924,12 @@
     "description": "Background color for the clickable date on the X-axis of the chart grid.",
     "components": []
   },
+  {
+    "name": "--intergalactic-chart-x-axis-accent-tick",
+    "value": "oklch(0.96 0.001 180)",
+    "description": "Background color for the accent tick on the X-axis.",
+    "components": []
+  },
   {
     "name": "--intergalactic-control-checkbox-bg-normal",
     "value": "oklch(1 0 0)",
@@ -2733,7 +2739,7 @@
   },
   {
     "name": "--intergalactic-tag-secondary-border-invert",
-    "value": "oklch(0.989 0.019 140 / 0.232)",
+    "value": "oklch(0.994 0.011 140 / 0.283)",
     "description": "Inverted border color of the secondary Tag.",
     "components": [
       "tag"
@@ -3095,7 +3101,7 @@
   },
   {
     "name": "--intergalactic-tooltip-border-invert",
-    "value": "oklch(0.35 0.006 140)",
+    "value": "oklch(0.4 0.004 140)",
     "description": "Border of the Tooltip with dark theme.",
     "components": [
       "base-components",
@@ -3216,7 +3222,7 @@
   },
   {
     "name": "--intergalactic-box-shadow-chart-dot-elevated",
-    "value": "0px 0px 1px 0px oklch(0.176 0.033 175.7 / 0.07), 0px 1px 3px 0px oklch(0.176 0.033 175.7 / 0.07)",
+    "value": "0px 0px 2px 0px oklch(0.137 0.026 175.7 / 0.161), 0px 1px 2px 0px oklch(0.137 0.026 175.7 / 0.161)",
     "description": "Shadow of the elevated chart dot.",
     "components": [
       "d3-chart"