@gravity-ui/chartkit 3.0.0-beta.9 → 3.0.0-beta.zefirka.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -8,24 +8,24 @@
8
8
  }
9
9
 
10
10
  .chartkit-theme_common {
11
- --highcarts-navigator-border: var(--yc-color-line-generic);
12
- --highcarts-navigator-track: var(--yc-color-base-generic);
13
- --highcarts-navigator-body: var(--yc-color-scroll-handle);
14
- --highcharts-series-border: var(--yc-color-base-background);
15
- --highcharts-grid-line: var(--yc-color-line-generic);
16
- --highcharts-axis-line: var(--yc-color-line-generic);
17
- --highcharts-tick: var(--yc-color-line-generic);
18
- --highcharts-title: var(--yc-color-text-primary);
19
- --highcharts-axis-labels: var(--yc-color-text-secondary);
20
- --highcharts-data-labels: var(--yc-color-text-complementary);
21
- --highcharts-plot-line-label: var(--yc-color-text-complementary);
22
- --highcharts-legend-item: var(--yc-color-text-secondary);
23
- --highcharts-legend-item-hover: var(--yc-color-text-primary);
24
- --highcharts-legend-item-hidden: var(--yc-color-text-hint);
25
- --highcharts-floating-bg: var(--yc-color-infographics-tooltip-bg);
26
- --highcharts-tooltip-text: var(--yc-color-text-primary);
11
+ --highcarts-navigator-border: var(--g-color-line-generic);
12
+ --highcarts-navigator-track: var(--g-color-base-generic);
13
+ --highcarts-navigator-body: var(--g-color-scroll-handle);
14
+ --highcharts-series-border: var(--g-color-base-background);
15
+ --highcharts-grid-line: var(--g-color-line-generic);
16
+ --highcharts-axis-line: var(--g-color-line-generic);
17
+ --highcharts-tick: var(--g-color-line-generic);
18
+ --highcharts-title: var(--g-color-text-primary);
19
+ --highcharts-axis-labels: var(--g-color-text-secondary);
20
+ --highcharts-data-labels: var(--g-color-text-complementary);
21
+ --highcharts-plot-line-label: var(--g-color-text-complementary);
22
+ --highcharts-legend-item: var(--g-color-text-secondary);
23
+ --highcharts-legend-item-hover: var(--g-color-text-primary);
24
+ --highcharts-legend-item-hidden: var(--g-color-text-hint);
25
+ --highcharts-floating-bg: var(--g-color-infographics-tooltip-bg);
26
+ --highcharts-tooltip-text: var(--g-color-text-primary);
27
27
  --highcharts-tooltip-bg: var(--highcharts-floating-bg);
28
- --highcharts-tooltip-alternate-bg: var(--yc-color-base-generic);
29
- --highcharts-tooltip-text-complementary: var(--yc-color-text-complementary);
30
- --highcharts-holiday-band: var(--yc-color-base-generic);
28
+ --highcharts-tooltip-alternate-bg: var(--g-color-base-generic);
29
+ --highcharts-tooltip-text-complementary: var(--g-color-text-complementary);
30
+ --highcharts-holiday-band: var(--g-color-base-generic);
31
31
  }
@@ -244,7 +244,7 @@ export const data = {
244
244
  .rect(rect.x, rect.y, rect.width, rect.height)
245
245
  .addClass('highcharts-axis-grid-divider')
246
246
  .attr({
247
- fill: 'var(--yc-color-base-background)',
247
+ fill: 'var(--g-color-base-background)',
248
248
  zIndex: 8,
249
249
  })
250
250
  .add();
@@ -1,5 +1,5 @@
1
1
  .styled-split-pane__pane-resizer {
2
- background: var(--yc-color-base-generic);
2
+ background: var(--g-color-base-generic);
3
3
  z-index: 1;
4
4
  box-sizing: border-box;
5
5
  position: relative;
@@ -159,12 +159,12 @@ export function buildLegend(options) {
159
159
  }
160
160
  },
161
161
  navigation: {
162
- activeColor: 'var(--yc-color-base-special)',
163
- inactiveColor: 'var(--yc-color-base-generic-accent-disabled)',
164
- style: { color: 'var(--yc-color-text-primary)' },
162
+ activeColor: 'var(--g-color-base-brand)',
163
+ inactiveColor: 'var(--g-color-base-generic-accent-disabled)',
164
+ style: { color: 'var(--g-color-text-primary)' },
165
165
  },
166
166
  title: {
167
- style: { color: 'var(--yc-color-text-secondary)' },
167
+ style: { color: 'var(--g-color-text-secondary)' },
168
168
  },
169
169
  };
170
170
  if (options.outsideLegend) {
@@ -163,7 +163,7 @@ const options = {
163
163
  },
164
164
  title: {
165
165
  style: {
166
- color: 'var(--yc-color-text-secondary)',
166
+ color: 'var(--g-color-text-secondary)',
167
167
  },
168
168
  },
169
169
  },
@@ -8,12 +8,12 @@
8
8
  }
9
9
 
10
10
  .chartkit-graph .highcharts-legend .highcharts-coloraxis-labels text {
11
- fill: var(--yc-color-text-secondary) !important;
12
- color: var(--yc-color-text-secondary) !important;
11
+ fill: var(--g-color-text-secondary) !important;
12
+ color: var(--g-color-text-secondary) !important;
13
13
  }
14
14
 
15
15
  .chartkit-graph .highcharts-legend .highcharts-coloraxis-grid path {
16
- stroke: var(--yc-color-base-background);
16
+ stroke: var(--g-color-base-background);
17
17
  }
18
18
 
19
19
  .chartkit-tooltip {
@@ -31,7 +31,7 @@
31
31
  border: none;
32
32
  border-radius: 0;
33
33
  box-shadow: none;
34
- border-bottom: 1px solid var(--yc-color-line-generic);
34
+ border-bottom: 1px solid var(--g-color-line-generic);
35
35
  }
36
36
 
37
37
  .chartkit-tooltip_yandex-map {
@@ -4,19 +4,19 @@
4
4
  }
5
5
 
6
6
  .chartkit-highcharts-tooltip-container._tooltip-with-scroll ._tooltip-header td:last-child {
7
- padding-right: calc(18px + var(--yc-scrollbar-width, 15px));
7
+ padding-right: calc(18px + var(--g-scrollbar-width, 15px));
8
8
  }
9
9
 
10
10
  .chartkit-highcharts-tooltip-container._tooltip-with-scroll ._tooltip-footer td:last-child {
11
- padding-right: calc(18px + var(--yc-scrollbar-width, 15px));
11
+ padding-right: calc(18px + var(--g-scrollbar-width, 15px));
12
12
  }
13
13
 
14
14
  .chartkit-highcharts-tooltip-container._tooltip-with-scroll-in-safari ._tooltip-row td:last-child {
15
- padding-right: calc(18px + var(--yc-scrollbar-width, 15px));
15
+ padding-right: calc(18px + var(--g-scrollbar-width, 15px));
16
16
  }
17
17
 
18
18
  .chartkit-highcharts-tooltip-container._tooltip-with-scroll-in-safari ._tooltip-rows__summ-tr td:last-child {
19
- padding-right: calc(18px + var(--yc-scrollbar-width, 15px));
19
+ padding-right: calc(18px + var(--g-scrollbar-width, 15px));
20
20
  }
21
21
 
22
22
  ._tooltip {
@@ -347,7 +347,7 @@
347
347
  }
348
348
 
349
349
  ._tooltip-right__traf-div_for-split-tooltip {
350
- color: var(--yc-color-text-secondary);
350
+ color: var(--g-color-text-secondary);
351
351
  padding-left: 8px;
352
352
  border-top: none;
353
353
  border-left: 2px solid;
@@ -49,7 +49,7 @@
49
49
  .chartkit-indicator__item-title {
50
50
  font-weight: 500;
51
51
  line-height: 1.2;
52
- color: var(--yc-color-text-primary);
52
+ color: var(--g-color-text-primary);
53
53
  font-size: 16px;
54
54
  padding-bottom: 0.125em;
55
55
  }
@@ -1,4 +1,4 @@
1
1
  .yagr-tooltip {
2
- background-color: var(--yc-color-infographics-tooltip-bg);
2
+ background-color: var(--g-color-infographics-tooltip-bg);
3
3
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
4
4
  }
@@ -4,26 +4,26 @@
4
4
  }
5
5
 
6
6
  .chartkit-highcharts-tooltip-container._tooltip-with-scroll ._tooltip-header td:last-child {
7
- padding-right: calc(18px + var(--yc-scrollbar-width, 15px));
7
+ padding-right: calc(18px + var(--g-scrollbar-width, 15px));
8
8
  }
9
9
 
10
10
  .chartkit-highcharts-tooltip-container._tooltip-with-scroll ._tooltip-footer td:last-child {
11
- padding-right: calc(18px + var(--yc-scrollbar-width, 15px));
11
+ padding-right: calc(18px + var(--g-scrollbar-width, 15px));
12
12
  }
13
13
 
14
14
  .chartkit-highcharts-tooltip-container._tooltip-with-scroll-in-safari ._tooltip-row td:last-child {
15
- padding-right: calc(18px + var(--yc-scrollbar-width, 15px));
15
+ padding-right: calc(18px + var(--g-scrollbar-width, 15px));
16
16
  }
17
17
 
18
18
  .chartkit-highcharts-tooltip-container._tooltip-with-scroll-in-safari ._tooltip-rows__summ-tr td:last-child {
19
- padding-right: calc(18px + var(--yc-scrollbar-width, 15px));
19
+ padding-right: calc(18px + var(--g-scrollbar-width, 15px));
20
20
  }
21
21
 
22
22
  ._tooltip {
23
23
  border-radius: 5px;
24
- background: var(--yc-color-infographics-tooltip-bg);
25
- background-color: var(--yc-color-infographics-tooltip-bg);
26
- color: var(--yc-color-text-primary);
24
+ background: var(--g-color-infographics-tooltip-bg);
25
+ background-color: var(--g-color-infographics-tooltip-bg);
26
+ color: var(--g-color-text-primary);
27
27
  font-size: 12px;
28
28
  overflow: hidden;
29
29
  box-sizing: border-box;
@@ -150,7 +150,7 @@
150
150
  ._tooltip-rows__table thead._tooltip-header tr:not(._tooltip-fake-row):first-child td {
151
151
  padding-top: 6px;
152
152
  padding-bottom: 6px;
153
- border-bottom: 1px solid var(--yc-color-line-generic);
153
+ border-bottom: 1px solid var(--g-color-line-generic);
154
154
  }
155
155
 
156
156
  ._tooltip-rows__table tbody {
@@ -169,11 +169,11 @@
169
169
  }
170
170
 
171
171
  ._tooltip-rows__table tbody._tooltip-list ._tooltip-row-dark-bg {
172
- background-color: var(--yc-color-base-generic);
172
+ background-color: var(--g-color-base-generic);
173
173
  }
174
174
 
175
175
  ._tooltip-rows__table tbody ._hidden-rows-sum._hidden-rows-sum-dark-bg {
176
- background-color: var(--yc-color-base-generic);
176
+ background-color: var(--g-color-base-generic);
177
177
  }
178
178
 
179
179
  ._tooltip-rows__table tbody ._hidden-rows-sum td {
@@ -281,9 +281,9 @@
281
281
 
282
282
  ._tooltip-rows__summ-td {
283
283
  padding: 6px 0 6px 3px;
284
- color: var(--yc-color-text-complementary);
284
+ color: var(--g-color-text-complementary);
285
285
  font-size: 12px;
286
- border-top: 1px solid var(--yc-color-line-generic);
286
+ border-top: 1px solid var(--g-color-line-generic);
287
287
  }
288
288
 
289
289
  ._tooltip-rows__summ-td-value {
@@ -308,7 +308,7 @@
308
308
  ._tooltip-right__td {
309
309
  vertical-align: top;
310
310
  opacity: 0.9;
311
- border-left: 1px solid var(--yc-color-line-generic);
311
+ border-left: 1px solid var(--g-color-line-generic);
312
312
  white-space: normal;
313
313
  font-size: 8pt;
314
314
  position: relative;
@@ -348,7 +348,7 @@
348
348
  }
349
349
 
350
350
  ._tooltip-right__traf-div_for-split-tooltip {
351
- color: var(--yc-color-text-secondary);
351
+ color: var(--g-color-text-secondary);
352
352
  padding-left: 8px;
353
353
  border-top: none;
354
354
  border-left: 2px solid;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/chartkit",
3
- "version": "3.0.0-beta.9",
3
+ "version": "3.0.0-beta.zefirka.2",
4
4
  "description": "React component used to render charts based on any sources you need",
5
5
  "license": "MIT",
6
6
  "repository": "git@github.com:gravity-ui/ChartKit.git",
@@ -14,7 +14,7 @@
14
14
  },
15
15
  "dependencies": {
16
16
  "@gravity-ui/date-utils": "^1.4.1",
17
- "@gravity-ui/yagr": "^3.3.6",
17
+ "@gravity-ui/yagr": "^3.5.0",
18
18
  "bem-cn-lite": "^4.1.0",
19
19
  "highcharts": "^8.2.2",
20
20
  "highcharts-react-official": "^3.0.0",
@@ -30,7 +30,7 @@
30
30
  "@gravity-ui/prettier-config": "^1.0.1",
31
31
  "@gravity-ui/stylelint-config": "^1.0.1",
32
32
  "@gravity-ui/tsconfig": "^1.0.0",
33
- "@gravity-ui/uikit": "^4.2.0",
33
+ "@gravity-ui/uikit": "^5.0.0-beta.1",
34
34
  "@storybook/addon-essentials": "^7.0.26",
35
35
  "@storybook/addon-knobs": "^7.0.2",
36
36
  "@storybook/cli": "^7.0.26",
@@ -71,7 +71,7 @@
71
71
  "typescript": "^4.9.5"
72
72
  },
73
73
  "peerDependencies": {
74
- "@gravity-ui/uikit": "^4.0.0",
74
+ "@gravity-ui/uikit": "^5.0.0-beta.1",
75
75
  "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
76
76
  },
77
77
  "scripts": {