Paint the ApexCharts tooltip arrow like the tooltip (#2949)

.changeset/apexcharts-tooltip-arrow.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fixed the ApexCharts tooltip arrow staying white on the dark tooltip by setting the `--apx-tt-bg` and `--apx-tt-border` tokens.

core/scss/tests/__snapshots__/css-var-prefix.test.mjs.snap

@@ -10,6 +10,8 @@ exports[`css custom-property prefixing > leaves vendor-owned names alone and pre
   "--apx-series-3",
   "--apx-series-4",
   "--apx-series-5",
+  "--apx-tt-bg",
+  "--apx-tt-border",
   "--apx-tt-color-muted",
   "--fc-border-color",
   "--fc-daygrid-event-dot-width",

core/scss/vendor/_apexcharts.scss

@@ -30,12 +30,18 @@
   // !important because ApexCharts injects its own stylesheet at runtime, after this one,
   // and its default lands on the same selector.
   --apx-tt-color-muted: #{$tooltip-color} !important;
+  // The arrow connector is a separate element painted from these two tokens, not
+  // from the box's background: without them it stays white on the dark tooltip.
+  // The border token keeps the tooltip color rather than going transparent, and
+  // the box keeps its 1px border: ApexCharts parks the arrow's centre on that
+  // border line, so removing it leaves a 1px seam between box and arrow.
+  --apx-tt-bg: #{$tooltip-bg} !important;
+  --apx-tt-border: #{$tooltip-bg} !important;
 
   padding: 0.25rem !important;
   font-size: $tooltip-font-size !important;
   color: $tooltip-color !important;
   background: $tooltip-bg !important;
-  border: 0 !important;
   box-shadow: none !important;
 }