feat: remove uikit css variables proxing

src/components/ChartKit.tsx

@@ -8,7 +8,6 @@ import {ErrorBoundary} from './ErrorBoundary/ErrorBoundary';
 import {Loader} from './Loader/Loader';
 
 import '@yandex-cloud/uikit/styles/styles.scss';
-import '../styles/theme.scss';
 import './ChartKit.scss';
 
 const b = block('chartkit');

src/plugins/yagr/renderer/YagrWidget.scss

@@ -1,4 +1,4 @@
 .yagr-tooltip {
-    background-color: var(--tooltip-bg);
+    background-color: var(--yc-color-infographics-tooltip-bg);
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
 }

src/plugins/yagr/renderer/YagrWidget.tsx

@@ -183,7 +183,8 @@ const YagrWidget = React.forwardRef<ChartKitWidgetRef | undefined, YagrWidgetPro
         if (config.tooltip?.enabled !== false) {
             config.tooltip = config.tooltip || {};
             config.tooltip.render = config.tooltip?.render || renderTooltip;
-            config.tooltip.className = 'chartkit-theme';
+            // "className" property prevent default yagr styles adding
+            config.tooltip.className = 'chartkit-yagr-tooltip';
 
             config.tooltip.onStateChange = (tooltip, {action, actions}) => {
                 switch (action) {

src/plugins/yagr/renderer/tooltip/tooltip.scss

@@ -18,30 +18,30 @@
 
     &._tooltip-with-scroll {
         ._tooltip-header td:last-child {
-            padding-right: calc(#{18px} + var(--scrollbar-width, #{15px}));
+            padding-right: calc(#{18px} + var(--yc-scrollbar-width, #{15px}));
         }
 
         ._tooltip-footer td:last-child {
-            padding-right: calc(#{18px} + var(--scrollbar-width, #{15px}));
+            padding-right: calc(#{18px} + var(--yc-scrollbar-width, #{15px}));
         }
     }
 
     &._tooltip-with-scroll-in-safari {
         ._tooltip-row td:last-child {
-            padding-right: calc(#{18px} + var(--scrollbar-width, #{15px}));
+            padding-right: calc(#{18px} + var(--yc-scrollbar-width, #{15px}));
         }
 
         ._tooltip-rows__summ-tr td:last-child {
-            padding-right: calc(#{18px} + var(--scrollbar-width, #{15px}));
+            padding-right: calc(#{18px} + var(--yc-scrollbar-width, #{15px}));
         }
     }
 }
 
 ._tooltip {
     border-radius: 5px;
-    background: var(--tooltip-bg);
-    background-color: var(--tooltip-bg);
-    color: var(--tooltip-text);
+    background: var(--yc-color-infographics-tooltip-bg);
+    background-color: var(--yc-color-infographics-tooltip-bg);
+    color: var(--yc-color-text-primary);
     font-size: 12px;
     overflow: hidden;
     box-sizing: border-box;
@@ -173,7 +173,7 @@
                 &._tooltip-header tr:not(._tooltip-fake-row):first-child td {
                     padding-top: 6px;
                     padding-bottom: 6px;
-                    border-bottom: 1px solid var(--tooltip-grid-line);
+                    border-bottom: 1px solid var(--yc-color-line-generic);
                 }
             }
 
@@ -191,13 +191,13 @@
                     overflow-x: hidden;
 
                     ._tooltip-row-dark-bg {
-                        background-color: var(--tooltip-alternate-bg);
+                        background-color: var(--yc-color-base-generic);
                     }
                 }
 
                 ._hidden-rows-sum {
                     &._hidden-rows-sum-dark-bg {
-                        background-color: var(--tooltip-alternate-bg);
+                        background-color: var(--yc-color-base-generic);
                     }
 
                     td {
@@ -311,9 +311,9 @@
 
         &__summ-td {
             padding: 6px 0 6px 3px;
-            color: var(--tooltip-text-complementary);
+            color: var(--yc-color-text-complementary);
             font-size: 12px;
-            border-top: 1px solid var(--tooltip-grid-line);
+            border-top: 1px solid var(--yc-color-line-generic);
 
             &-value {
                 @include monospaceFont;
@@ -341,7 +341,7 @@
         &__td {
             vertical-align: top;
             opacity: 0.9;
-            border-left: 1px solid var(--tooltip-grid-line);
+            border-left: 1px solid var(--yc-color-line-generic);
             white-space: normal;
             font-size: 8pt;
             position: relative;
@@ -382,7 +382,7 @@
             word-break: break-word;
 
             &_for-split-tooltip {
-                color: var(--split-tooltip-color);
+                color: var(--yc-color-text-secondary);
                 padding-left: 8px;
                 border-top: none;
                 border-left: 2px solid;