@gitlab/ui 80.10.0 → 80.11.0

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.
Files changed (34) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/components/charts/discrete_scatter/discrete_scatter.js +1 -1
  3. package/dist/components/charts/heatmap/heatmap.js +1 -1
  4. package/dist/components/charts/legend/legend.js +1 -1
  5. package/dist/components/charts/line/line.js +1 -1
  6. package/dist/tokens/common_story_options.js +1 -1
  7. package/dist/tokens/scss/_tokens_custom_properties.scss +246 -0
  8. package/dist/utils/charts/config.js +1 -1
  9. package/dist/utils/charts/mock_data.js +1 -1
  10. package/dist/utils/charts/theme.js +1 -1
  11. package/package.json +1 -1
  12. package/src/components/charts/area/area.stories.js +1 -1
  13. package/src/components/charts/discrete_scatter/discrete_scatter.vue +1 -1
  14. package/src/components/charts/heatmap/heatmap.vue +1 -1
  15. package/src/components/charts/legend/legend.stories.js +1 -1
  16. package/src/components/charts/legend/legend.vue +1 -1
  17. package/src/components/charts/line/line.vue +1 -1
  18. package/src/components/charts/stacked_column/stacked_column.stories.js +1 -1
  19. package/src/scss/tokens.scss +2 -2
  20. package/src/scss/variables.scss +1 -1
  21. package/src/tokens/build/scss/_tokens_custom_properties.scss +246 -0
  22. package/src/tokens/color.dark.tokens.stories.js +1 -1
  23. package/src/tokens/color.data_viz.dark.tokens.stories.js +1 -1
  24. package/src/tokens/color.data_viz.tokens.stories.js +1 -1
  25. package/src/tokens/color.theme.dark.tokens.stories.js +1 -1
  26. package/src/tokens/color.theme.tokens.stories.js +1 -1
  27. package/src/tokens/color.tokens.stories.js +1 -1
  28. package/src/tokens/color.transparency.tokens.stories.js +1 -1
  29. package/src/tokens/common_story_options.js +1 -1
  30. package/src/tokens/text.dark.tokens.stories.js +1 -1
  31. package/src/tokens/text.tokens.stories.js +1 -1
  32. package/src/utils/charts/config.js +1 -1
  33. package/src/utils/charts/mock_data.js +1 -1
  34. package/src/utils/charts/theme.js +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ # [80.11.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v80.10.0...v80.11.0) (2024-05-17)
2
+
3
+
4
+ ### Features
5
+
6
+ * **DesignTokens:** Generate SCSS output with CSS custom property values ([3b92239](https://gitlab.com/gitlab-org/gitlab-ui/commit/3b92239aa7d916d4ee2ed64c7ef3220a5fafea08))
7
+
1
8
  # [80.10.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v80.9.0...v80.10.0) (2024-05-15)
2
9
 
3
10
 
package/dist/components/charts/discrete_scatter/discrete_scatter.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import merge from 'lodash/merge';
2
- import { GRAY_200 } from '../../../../dist/tokens/js/tokens';
2
+ import { GRAY_200 } from '../../../tokens/build/js/tokens';
3
3
  import { defaultChartOptions, dataZoomAdjustments, mergeSeriesToOptions } from '../../../utils/charts/config';
4
4
  import { colorFromDefaultPalette } from '../../../utils/charts/theme';
5
5
  import { HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
package/dist/components/charts/heatmap/heatmap.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import merge from 'lodash/merge';
2
- import { GRAY_100, WHITE } from '../../../../dist/tokens/js/tokens';
2
+ import { GRAY_100, WHITE } from '../../../tokens/build/js/tokens';
3
3
  import { getTooltipTitle, getTooltipContent } from '../../../utils/charts/config';
4
4
  import { HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
5
5
  import { heatmapHues } from '../../../utils/charts/theme';
package/dist/components/charts/legend/legend.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as echarts from 'echarts';
2
- import { GRAY_200 } from '../../../../dist/tokens/js/tokens';
2
+ import { GRAY_200 } from '../../../tokens/build/js/tokens';
3
3
  import { defaultFontSize } from '../../../utils/charts/config';
4
4
  import { LEGEND_AVERAGE_TEXT, LEGEND_CURRENT_TEXT, LEGEND_MIN_TEXT, LEGEND_MAX_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE } from '../../../utils/charts/constants';
5
5
  import { engineeringNotation, average } from '../../../utils/number_utils';
package/dist/components/charts/line/line.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import merge from 'lodash/merge';
2
- import { GRAY_200 } from '../../../../dist/tokens/js/tokens';
2
+ import { GRAY_200 } from '../../../tokens/build/js/tokens';
3
3
  import { symbolSize, lineStyle, getThresholdConfig, generateAnnotationSeries, defaultChartOptions, dataZoomAdjustments, mergeSeriesToOptions, mergeAnnotationAxisToOptions, grid } from '../../../utils/charts/config';
4
4
  import { LEGEND_AVERAGE_TEXT, LEGEND_MAX_TEXT, LEGEND_MIN_TEXT, LEGEND_CURRENT_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE, HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
5
5
  import { colorFromDefaultPalette } from '../../../utils/charts/theme';
package/dist/tokens/common_story_options.js CHANGED
@@ -1,4 +1,4 @@
1
- import { WHITE, GRAY_950 } from '../../dist/tokens/js/tokens';
1
+ import { WHITE, GRAY_950 } from './build/js/tokens';
2
2
  import TokensStory from './tokens_story';
3
3
 
4
4
  const createDesignTokenStory = function () {
package/dist/tokens/scss/_tokens_custom_properties.scss ADDED
@@ -0,0 +1,246 @@
1
+ /**
2
+ * Automatically generated
3
+ * Do not edit directly
4
+ */
5
+
6
+ $data-viz-green-50: var(--data-viz-green-50);
7
+ $data-viz-green-100: var(--data-viz-green-100);
8
+ $data-viz-green-200: var(--data-viz-green-200);
9
+ $data-viz-green-300: var(--data-viz-green-300);
10
+ $data-viz-green-400: var(--data-viz-green-400);
11
+ $data-viz-green-500: var(--data-viz-green-500);
12
+ $data-viz-green-600: var(--data-viz-green-600);
13
+ $data-viz-green-700: var(--data-viz-green-700);
14
+ $data-viz-green-800: var(--data-viz-green-800);
15
+ $data-viz-green-900: var(--data-viz-green-900);
16
+ $data-viz-green-950: var(--data-viz-green-950);
17
+ $data-viz-aqua-50: var(--data-viz-aqua-50);
18
+ $data-viz-aqua-100: var(--data-viz-aqua-100);
19
+ $data-viz-aqua-200: var(--data-viz-aqua-200);
20
+ $data-viz-aqua-300: var(--data-viz-aqua-300);
21
+ $data-viz-aqua-400: var(--data-viz-aqua-400);
22
+ $data-viz-aqua-500: var(--data-viz-aqua-500);
23
+ $data-viz-aqua-600: var(--data-viz-aqua-600);
24
+ $data-viz-aqua-700: var(--data-viz-aqua-700);
25
+ $data-viz-aqua-800: var(--data-viz-aqua-800);
26
+ $data-viz-aqua-900: var(--data-viz-aqua-900);
27
+ $data-viz-aqua-950: var(--data-viz-aqua-950);
28
+ $data-viz-blue-50: var(--data-viz-blue-50);
29
+ $data-viz-blue-100: var(--data-viz-blue-100);
30
+ $data-viz-blue-200: var(--data-viz-blue-200);
31
+ $data-viz-blue-300: var(--data-viz-blue-300);
32
+ $data-viz-blue-400: var(--data-viz-blue-400);
33
+ $data-viz-blue-500: var(--data-viz-blue-500);
34
+ $data-viz-blue-600: var(--data-viz-blue-600);
35
+ $data-viz-blue-700: var(--data-viz-blue-700);
36
+ $data-viz-blue-800: var(--data-viz-blue-800);
37
+ $data-viz-blue-900: var(--data-viz-blue-900);
38
+ $data-viz-blue-950: var(--data-viz-blue-950);
39
+ $data-viz-magenta-50: var(--data-viz-magenta-50);
40
+ $data-viz-magenta-100: var(--data-viz-magenta-100);
41
+ $data-viz-magenta-200: var(--data-viz-magenta-200);
42
+ $data-viz-magenta-300: var(--data-viz-magenta-300);
43
+ $data-viz-magenta-400: var(--data-viz-magenta-400);
44
+ $data-viz-magenta-500: var(--data-viz-magenta-500);
45
+ $data-viz-magenta-600: var(--data-viz-magenta-600);
46
+ $data-viz-magenta-700: var(--data-viz-magenta-700);
47
+ $data-viz-magenta-800: var(--data-viz-magenta-800);
48
+ $data-viz-magenta-900: var(--data-viz-magenta-900);
49
+ $data-viz-magenta-950: var(--data-viz-magenta-950);
50
+ $data-viz-orange-50: var(--data-viz-orange-50);
51
+ $data-viz-orange-100: var(--data-viz-orange-100);
52
+ $data-viz-orange-200: var(--data-viz-orange-200);
53
+ $data-viz-orange-300: var(--data-viz-orange-300);
54
+ $data-viz-orange-400: var(--data-viz-orange-400);
55
+ $data-viz-orange-500: var(--data-viz-orange-500);
56
+ $data-viz-orange-600: var(--data-viz-orange-600);
57
+ $data-viz-orange-700: var(--data-viz-orange-700);
58
+ $data-viz-orange-800: var(--data-viz-orange-800);
59
+ $data-viz-orange-900: var(--data-viz-orange-900);
60
+ $data-viz-orange-950: var(--data-viz-orange-950);
61
+ $theme-indigo-10: var(--theme-indigo-10);
62
+ $theme-indigo-50: var(--theme-indigo-50);
63
+ $theme-indigo-100: var(--theme-indigo-100);
64
+ $theme-indigo-200: var(--theme-indigo-200);
65
+ $theme-indigo-300: var(--theme-indigo-300);
66
+ $theme-indigo-400: var(--theme-indigo-400);
67
+ $theme-indigo-500: var(--theme-indigo-500);
68
+ $theme-indigo-600: var(--theme-indigo-600);
69
+ $theme-indigo-700: var(--theme-indigo-700);
70
+ $theme-indigo-800: var(--theme-indigo-800);
71
+ $theme-indigo-900: var(--theme-indigo-900);
72
+ $theme-indigo-950: var(--theme-indigo-950);
73
+ $theme-blue-10: var(--theme-blue-10);
74
+ $theme-blue-50: var(--theme-blue-50);
75
+ $theme-blue-100: var(--theme-blue-100);
76
+ $theme-blue-200: var(--theme-blue-200);
77
+ $theme-blue-300: var(--theme-blue-300);
78
+ $theme-blue-400: var(--theme-blue-400);
79
+ $theme-blue-500: var(--theme-blue-500);
80
+ $theme-blue-600: var(--theme-blue-600);
81
+ $theme-blue-700: var(--theme-blue-700);
82
+ $theme-blue-800: var(--theme-blue-800);
83
+ $theme-blue-900: var(--theme-blue-900);
84
+ $theme-blue-950: var(--theme-blue-950);
85
+ $theme-light-blue-10: var(--theme-light-blue-10);
86
+ $theme-light-blue-50: var(--theme-light-blue-50);
87
+ $theme-light-blue-100: var(--theme-light-blue-100);
88
+ $theme-light-blue-200: var(--theme-light-blue-200);
89
+ $theme-light-blue-300: var(--theme-light-blue-300);
90
+ $theme-light-blue-400: var(--theme-light-blue-400);
91
+ $theme-light-blue-500: var(--theme-light-blue-500);
92
+ $theme-light-blue-600: var(--theme-light-blue-600);
93
+ $theme-light-blue-700: var(--theme-light-blue-700);
94
+ $theme-light-blue-800: var(--theme-light-blue-800);
95
+ $theme-light-blue-900: var(--theme-light-blue-900);
96
+ $theme-light-blue-950: var(--theme-light-blue-950);
97
+ $theme-green-10: var(--theme-green-10);
98
+ $theme-green-50: var(--theme-green-50);
99
+ $theme-green-100: var(--theme-green-100);
100
+ $theme-green-200: var(--theme-green-200);
101
+ $theme-green-300: var(--theme-green-300);
102
+ $theme-green-400: var(--theme-green-400);
103
+ $theme-green-500: var(--theme-green-500);
104
+ $theme-green-600: var(--theme-green-600);
105
+ $theme-green-700: var(--theme-green-700);
106
+ $theme-green-800: var(--theme-green-800);
107
+ $theme-green-900: var(--theme-green-900);
108
+ $theme-green-950: var(--theme-green-950);
109
+ $theme-red-10: var(--theme-red-10);
110
+ $theme-red-50: var(--theme-red-50);
111
+ $theme-red-100: var(--theme-red-100);
112
+ $theme-red-200: var(--theme-red-200);
113
+ $theme-red-300: var(--theme-red-300);
114
+ $theme-red-400: var(--theme-red-400);
115
+ $theme-red-500: var(--theme-red-500);
116
+ $theme-red-600: var(--theme-red-600);
117
+ $theme-red-700: var(--theme-red-700);
118
+ $theme-red-800: var(--theme-red-800);
119
+ $theme-red-900: var(--theme-red-900);
120
+ $theme-red-950: var(--theme-red-950);
121
+ $theme-light-red-10: var(--theme-light-red-10);
122
+ $theme-light-red-50: var(--theme-light-red-50);
123
+ $theme-light-red-100: var(--theme-light-red-100);
124
+ $theme-light-red-200: var(--theme-light-red-200);
125
+ $theme-light-red-300: var(--theme-light-red-300);
126
+ $theme-light-red-400: var(--theme-light-red-400);
127
+ $theme-light-red-500: var(--theme-light-red-500);
128
+ $theme-light-red-600: var(--theme-light-red-600);
129
+ $theme-light-red-700: var(--theme-light-red-700);
130
+ $theme-light-red-800: var(--theme-light-red-800);
131
+ $theme-light-red-900: var(--theme-light-red-900);
132
+ $theme-light-red-950: var(--theme-light-red-950);
133
+ $black: var(--black);
134
+ $white: var(--white);
135
+ $blue-50: var(--blue-50);
136
+ $blue-100: var(--blue-100);
137
+ $blue-200: var(--blue-200);
138
+ $blue-300: var(--blue-300);
139
+ $blue-400: var(--blue-400);
140
+ $blue-500: var(--blue-500);
141
+ $blue-600: var(--blue-600);
142
+ $blue-700: var(--blue-700);
143
+ $blue-800: var(--blue-800);
144
+ $blue-900: var(--blue-900);
145
+ $blue-950: var(--blue-950);
146
+ $gray-10: var(--gray-10);
147
+ $gray-50: var(--gray-50);
148
+ $gray-100: var(--gray-100);
149
+ $gray-200: var(--gray-200);
150
+ $gray-300: var(--gray-300);
151
+ $gray-400: var(--gray-400);
152
+ $gray-500: var(--gray-500);
153
+ $gray-600: var(--gray-600);
154
+ $gray-700: var(--gray-700);
155
+ $gray-800: var(--gray-800);
156
+ $gray-900: var(--gray-900);
157
+ $gray-950: var(--gray-950);
158
+ $green-50: var(--green-50);
159
+ $green-100: var(--green-100);
160
+ $green-200: var(--green-200);
161
+ $green-300: var(--green-300);
162
+ $green-400: var(--green-400);
163
+ $green-500: var(--green-500);
164
+ $green-600: var(--green-600);
165
+ $green-700: var(--green-700);
166
+ $green-800: var(--green-800);
167
+ $green-900: var(--green-900);
168
+ $green-950: var(--green-950);
169
+ $orange-50: var(--orange-50);
170
+ $orange-100: var(--orange-100);
171
+ $orange-200: var(--orange-200);
172
+ $orange-300: var(--orange-300);
173
+ $orange-400: var(--orange-400);
174
+ $orange-500: var(--orange-500);
175
+ $orange-600: var(--orange-600);
176
+ $orange-700: var(--orange-700);
177
+ $orange-800: var(--orange-800);
178
+ $orange-900: var(--orange-900);
179
+ $orange-950: var(--orange-950);
180
+ $purple-50: var(--purple-50);
181
+ $purple-100: var(--purple-100);
182
+ $purple-200: var(--purple-200);
183
+ $purple-300: var(--purple-300);
184
+ $purple-400: var(--purple-400);
185
+ $purple-500: var(--purple-500);
186
+ $purple-600: var(--purple-600);
187
+ $purple-700: var(--purple-700);
188
+ $purple-800: var(--purple-800);
189
+ $purple-900: var(--purple-900);
190
+ $purple-950: var(--purple-950);
191
+ $red-50: var(--red-50);
192
+ $red-100: var(--red-100);
193
+ $red-200: var(--red-200);
194
+ $red-300: var(--red-300);
195
+ $red-400: var(--red-400);
196
+ $red-500: var(--red-500);
197
+ $red-600: var(--red-600);
198
+ $red-700: var(--red-700);
199
+ $red-800: var(--red-800);
200
+ $red-900: var(--red-900);
201
+ $red-950: var(--red-950);
202
+ $brand-charcoal: var(--brand-charcoal);
203
+ $brand-orange-01: var(--brand-orange-01);
204
+ $brand-orange-02: var(--brand-orange-02);
205
+ $brand-orange-03: var(--brand-orange-03);
206
+ $brand-purple-01: var(--brand-purple-01);
207
+ $brand-purple-02: var(--brand-purple-02);
208
+ $brand-gray-01: var(--brand-gray-01);
209
+ $brand-gray-02: var(--brand-gray-02);
210
+ $brand-gray-03: var(--brand-gray-03);
211
+ $brand-gray-04: var(--brand-gray-04);
212
+ $brand-gray-05: var(--brand-gray-05);
213
+ $t-gray-a-16: var(--t-gray-a-16);
214
+ $t-gray-a-24: var(--t-gray-a-24);
215
+ $t-gray-a-02: var(--t-gray-a-02);
216
+ $t-gray-a-04: var(--t-gray-a-04);
217
+ $t-gray-a-06: var(--t-gray-a-06);
218
+ $t-gray-a-08: var(--t-gray-a-08);
219
+ $t-white-a-16: var(--t-white-a-16);
220
+ $t-white-a-24: var(--t-white-a-24);
221
+ $t-white-a-36: var(--t-white-a-36);
222
+ $t-white-a-02: var(--t-white-a-02);
223
+ $t-white-a-04: var(--t-white-a-04);
224
+ $t-white-a-06: var(--t-white-a-06);
225
+ $t-white-a-08: var(--t-white-a-08);
226
+ $gl-line-height-12: var(--gl-line-height-12);
227
+ $gl-line-height-16: var(--gl-line-height-16);
228
+ $gl-line-height-20: var(--gl-line-height-20);
229
+ $gl-line-height-24: var(--gl-line-height-24);
230
+ $gl-line-height-28: var(--gl-line-height-28);
231
+ $gl-line-height-32: var(--gl-line-height-32);
232
+ $gl-line-height-36: var(--gl-line-height-36);
233
+ $gl-line-height-42: var(--gl-line-height-42);
234
+ $gl-line-height-44: var(--gl-line-height-44);
235
+ $gl-line-height-52: var(--gl-line-height-52);
236
+ $gl-text-primary: var(--gl-text-primary);
237
+ $gl-text-secondary: var(--gl-text-secondary);
238
+ $gl-text-tertiary: var(--gl-text-tertiary);
239
+ $gl-text-color-default: var(--gl-text-color-default);
240
+ $gl-text-color-subtle: var(--gl-text-color-subtle);
241
+ $gl-text-color-strong: var(--gl-text-color-strong);
242
+ $gl-text-color-heading: var(--gl-text-color-heading);
243
+ $gl-text-color-link: var(--gl-text-color-link);
244
+ $gl-text-color-danger: var(--gl-text-color-danger);
245
+ $gl-text-color-success: var(--gl-text-color-success);
246
+ $gl-text-color-disabled: var(--gl-text-color-disabled);
package/dist/utils/charts/config.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import castArray from 'lodash/castArray';
2
2
  import merge from 'lodash/merge';
3
- import { BLUE_500 } from '../../../dist/tokens/js/tokens';
3
+ import { BLUE_500 } from '../../tokens/build/js/tokens';
4
4
  import { GlBreakpointInstance } from '../breakpoints';
5
5
  import { columnOptions } from '../constants';
6
6
  import { areDatesEqual } from '../datetime_utility';
package/dist/utils/charts/mock_data.js CHANGED
@@ -1,4 +1,4 @@
1
- import { BLUE_500 } from '../../../dist/tokens/js/tokens';
1
+ import { BLUE_500 } from '../../tokens/build/js/tokens';
2
2
  import { hexToRgba } from '../utils';
3
3
  import { colorFromDefaultPalette } from './theme';
4
4
 
package/dist/utils/charts/theme.js CHANGED
@@ -1,4 +1,4 @@
1
- import { GRAY_600, GRAY_200, GRAY_50, GRAY_300, GRAY_100, DATA_VIZ_BLUE_200, DATA_VIZ_BLUE_400, DATA_VIZ_BLUE_600, DATA_VIZ_BLUE_800, GRAY_900, GRAY_500, DATA_VIZ_BLUE_500, DATA_VIZ_BLUE_900, DATA_VIZ_ORANGE_500, DATA_VIZ_ORANGE_600, DATA_VIZ_AQUA_500, DATA_VIZ_GREEN_600, DATA_VIZ_MAGENTA_500, DATA_VIZ_BLUE_700, DATA_VIZ_ORANGE_800, DATA_VIZ_AQUA_700, DATA_VIZ_GREEN_800, DATA_VIZ_MAGENTA_700, DATA_VIZ_ORANGE_950, DATA_VIZ_AQUA_900, DATA_VIZ_GREEN_950, DATA_VIZ_MAGENTA_900, DATA_VIZ_ORANGE_700, DATA_VIZ_AQUA_600, DATA_VIZ_GREEN_700, DATA_VIZ_MAGENTA_600, DATA_VIZ_ORANGE_900, DATA_VIZ_AQUA_800, DATA_VIZ_GREEN_900, DATA_VIZ_MAGENTA_800, DATA_VIZ_BLUE_950, DATA_VIZ_AQUA_950, DATA_VIZ_GREEN_500, DATA_VIZ_MAGENTA_950, DATA_VIZ_ORANGE_400, DATA_VIZ_GREEN_400, DATA_VIZ_BLUE_300, DATA_VIZ_ORANGE_200, DATA_VIZ_AQUA_300, DATA_VIZ_GREEN_200, DATA_VIZ_MAGENTA_300, DATA_VIZ_BLUE_100, DATA_VIZ_ORANGE_50, DATA_VIZ_AQUA_100, DATA_VIZ_GREEN_50, DATA_VIZ_MAGENTA_100, DATA_VIZ_ORANGE_300, DATA_VIZ_AQUA_400, DATA_VIZ_GREEN_300, DATA_VIZ_MAGENTA_400, DATA_VIZ_ORANGE_100, DATA_VIZ_AQUA_200, DATA_VIZ_GREEN_100, DATA_VIZ_MAGENTA_200, DATA_VIZ_BLUE_50, DATA_VIZ_AQUA_50, DATA_VIZ_MAGENTA_50, RED_500, WHITE } from '../../../dist/tokens/js/tokens';
1
+ import { GRAY_600, GRAY_200, GRAY_50, GRAY_300, GRAY_100, DATA_VIZ_BLUE_200, DATA_VIZ_BLUE_400, DATA_VIZ_BLUE_600, DATA_VIZ_BLUE_800, GRAY_900, GRAY_500, DATA_VIZ_BLUE_500, DATA_VIZ_BLUE_900, DATA_VIZ_ORANGE_500, DATA_VIZ_ORANGE_600, DATA_VIZ_AQUA_500, DATA_VIZ_GREEN_600, DATA_VIZ_MAGENTA_500, DATA_VIZ_BLUE_700, DATA_VIZ_ORANGE_800, DATA_VIZ_AQUA_700, DATA_VIZ_GREEN_800, DATA_VIZ_MAGENTA_700, DATA_VIZ_ORANGE_950, DATA_VIZ_AQUA_900, DATA_VIZ_GREEN_950, DATA_VIZ_MAGENTA_900, DATA_VIZ_ORANGE_700, DATA_VIZ_AQUA_600, DATA_VIZ_GREEN_700, DATA_VIZ_MAGENTA_600, DATA_VIZ_ORANGE_900, DATA_VIZ_AQUA_800, DATA_VIZ_GREEN_900, DATA_VIZ_MAGENTA_800, DATA_VIZ_BLUE_950, DATA_VIZ_AQUA_950, DATA_VIZ_GREEN_500, DATA_VIZ_MAGENTA_950, DATA_VIZ_ORANGE_400, DATA_VIZ_GREEN_400, DATA_VIZ_BLUE_300, DATA_VIZ_ORANGE_200, DATA_VIZ_AQUA_300, DATA_VIZ_GREEN_200, DATA_VIZ_MAGENTA_300, DATA_VIZ_BLUE_100, DATA_VIZ_ORANGE_50, DATA_VIZ_AQUA_100, DATA_VIZ_GREEN_50, DATA_VIZ_MAGENTA_100, DATA_VIZ_ORANGE_300, DATA_VIZ_AQUA_400, DATA_VIZ_GREEN_300, DATA_VIZ_MAGENTA_400, DATA_VIZ_ORANGE_100, DATA_VIZ_AQUA_200, DATA_VIZ_GREEN_100, DATA_VIZ_MAGENTA_200, DATA_VIZ_BLUE_50, DATA_VIZ_AQUA_50, DATA_VIZ_MAGENTA_50, RED_500, WHITE } from '../../tokens/build/js/tokens';
2
2
  import { scrollHandleSvgPath } from '../svgs/svg_paths';
3
3
  import { hexToRgba } from '../utils';
4
4
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gitlab/ui",
3
- "version": "80.10.0",
3
+ "version": "80.11.0",
4
4
  "description": "GitLab UI Components",
5
5
  "license": "MIT",
6
6
  "main": "dist/index.js",
package/src/components/charts/area/area.stories.js CHANGED
@@ -2,7 +2,7 @@ import times from 'lodash/times';
2
2
  import { GlAreaChart } from '../../../charts';
3
3
  import { mockAnnotationsSeries, mockAnnotationsConfigs } from '../../../utils/charts/mock_data';
4
4
  import { toolbox } from '../../../utils/charts/story_config';
5
- import { DATA_VIZ_AQUA_500, DATA_VIZ_ORANGE_600 } from '../../../../dist/tokens/js/tokens';
5
+ import { DATA_VIZ_AQUA_500, DATA_VIZ_ORANGE_600 } from '../../../tokens/build/js/tokens';
6
6
  import { timeSeriesDateFormatter } from '../../../utils/charts/utils';
7
7
  import { generateTimeSeries } from '../../../utils/data_utils';
8
8
  import { disableControls } from '../../../utils/stories_utils';
package/src/components/charts/discrete_scatter/discrete_scatter.vue CHANGED
@@ -1,6 +1,6 @@
1
1
  <script>
2
2
  import merge from 'lodash/merge';
3
- import { GRAY_200 } from '../../../../dist/tokens/js/tokens';
3
+ import { GRAY_200 } from '../../../tokens/build/js/tokens';
4
4
  import {
5
5
  defaultChartOptions,
6
6
  dataZoomAdjustments,
package/src/components/charts/heatmap/heatmap.vue CHANGED
@@ -1,7 +1,7 @@
1
1
  <!-- eslint-disable vue/multi-word-component-names -->
2
2
  <script>
3
3
  import merge from 'lodash/merge';
4
- import { WHITE, GRAY_100 } from '../../../../dist/tokens/js/tokens';
4
+ import { WHITE, GRAY_100 } from '../../../tokens/build/js/tokens';
5
5
  import { getTooltipTitle, getTooltipContent } from '../../../utils/charts/config';
6
6
  import { HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
7
7
  import { heatmapHues } from '../../../utils/charts/theme';
package/src/components/charts/legend/legend.stories.js CHANGED
@@ -6,7 +6,7 @@ import {
6
6
  SERIES_NAME_LONG,
7
7
  SERIES_NAME_LONG_WITHOUT_SPACES,
8
8
  } from '../../../utils/stories_constants';
9
- import { GRAY_200 } from '../../../../dist/tokens/js/tokens';
9
+ import { GRAY_200 } from '../../../tokens/build/js/tokens';
10
10
  import readme from './legend.md';
11
11
 
12
12
  const generateOptions = (seriesLength, seriesNameType) => {
package/src/components/charts/legend/legend.vue CHANGED
@@ -1,7 +1,7 @@
1
1
  <!-- eslint-disable vue/multi-word-component-names -->
2
2
  <script>
3
3
  import * as echarts from 'echarts';
4
- import { GRAY_200 } from '../../../../dist/tokens/js/tokens';
4
+ import { GRAY_200 } from '../../../tokens/build/js/tokens';
5
5
  import { defaultFontSize } from '../../../utils/charts/config';
6
6
  import {
7
7
  LEGEND_LAYOUT_INLINE,
package/src/components/charts/line/line.vue CHANGED
@@ -19,7 +19,7 @@
19
19
  */
20
20
 
21
21
  import merge from 'lodash/merge';
22
- import { GRAY_200 } from '../../../../dist/tokens/js/tokens';
22
+ import { GRAY_200 } from '../../../tokens/build/js/tokens';
23
23
  import {
24
24
  defaultChartOptions,
25
25
  grid,
package/src/components/charts/stacked_column/stacked_column.stories.js CHANGED
@@ -11,7 +11,7 @@ import {
11
11
  DATA_VIZ_AQUA_500,
12
12
  DATA_VIZ_GREEN_600,
13
13
  DATA_VIZ_MAGENTA_500,
14
- } from '../../../../dist/tokens/js/tokens';
14
+ } from '../../../tokens/build/js/tokens';
15
15
  import readme from './stacked_column.md';
16
16
 
17
17
  const template = `
package/src/scss/tokens.scss CHANGED
@@ -1,2 +1,2 @@
1
- @import '../../dist/tokens/css/tokens';
2
- @import '../../dist/tokens/css/tokens.dark';
1
+ @import '../tokens/build/css/tokens';
2
+ @import '../tokens/build/css/tokens.dark';
package/src/scss/variables.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  @import 'functions';
2
- @import '../../dist/tokens/scss/tokens';
2
+ @import '../tokens/build/scss/tokens';
3
3
 
4
4
  // Layout
5
5
  $grid-size: px-to-rem(8px);
package/src/tokens/build/scss/_tokens_custom_properties.scss ADDED
@@ -0,0 +1,246 @@
1
+ /**
2
+ * Automatically generated
3
+ * Do not edit directly
4
+ */
5
+
6
+ $data-viz-green-50: var(--data-viz-green-50);
7
+ $data-viz-green-100: var(--data-viz-green-100);
8
+ $data-viz-green-200: var(--data-viz-green-200);
9
+ $data-viz-green-300: var(--data-viz-green-300);
10
+ $data-viz-green-400: var(--data-viz-green-400);
11
+ $data-viz-green-500: var(--data-viz-green-500);
12
+ $data-viz-green-600: var(--data-viz-green-600);
13
+ $data-viz-green-700: var(--data-viz-green-700);
14
+ $data-viz-green-800: var(--data-viz-green-800);
15
+ $data-viz-green-900: var(--data-viz-green-900);
16
+ $data-viz-green-950: var(--data-viz-green-950);
17
+ $data-viz-aqua-50: var(--data-viz-aqua-50);
18
+ $data-viz-aqua-100: var(--data-viz-aqua-100);
19
+ $data-viz-aqua-200: var(--data-viz-aqua-200);
20
+ $data-viz-aqua-300: var(--data-viz-aqua-300);
21
+ $data-viz-aqua-400: var(--data-viz-aqua-400);
22
+ $data-viz-aqua-500: var(--data-viz-aqua-500);
23
+ $data-viz-aqua-600: var(--data-viz-aqua-600);
24
+ $data-viz-aqua-700: var(--data-viz-aqua-700);
25
+ $data-viz-aqua-800: var(--data-viz-aqua-800);
26
+ $data-viz-aqua-900: var(--data-viz-aqua-900);
27
+ $data-viz-aqua-950: var(--data-viz-aqua-950);
28
+ $data-viz-blue-50: var(--data-viz-blue-50);
29
+ $data-viz-blue-100: var(--data-viz-blue-100);
30
+ $data-viz-blue-200: var(--data-viz-blue-200);
31
+ $data-viz-blue-300: var(--data-viz-blue-300);
32
+ $data-viz-blue-400: var(--data-viz-blue-400);
33
+ $data-viz-blue-500: var(--data-viz-blue-500);
34
+ $data-viz-blue-600: var(--data-viz-blue-600);
35
+ $data-viz-blue-700: var(--data-viz-blue-700);
36
+ $data-viz-blue-800: var(--data-viz-blue-800);
37
+ $data-viz-blue-900: var(--data-viz-blue-900);
38
+ $data-viz-blue-950: var(--data-viz-blue-950);
39
+ $data-viz-magenta-50: var(--data-viz-magenta-50);
40
+ $data-viz-magenta-100: var(--data-viz-magenta-100);
41
+ $data-viz-magenta-200: var(--data-viz-magenta-200);
42
+ $data-viz-magenta-300: var(--data-viz-magenta-300);
43
+ $data-viz-magenta-400: var(--data-viz-magenta-400);
44
+ $data-viz-magenta-500: var(--data-viz-magenta-500);
45
+ $data-viz-magenta-600: var(--data-viz-magenta-600);
46
+ $data-viz-magenta-700: var(--data-viz-magenta-700);
47
+ $data-viz-magenta-800: var(--data-viz-magenta-800);
48
+ $data-viz-magenta-900: var(--data-viz-magenta-900);
49
+ $data-viz-magenta-950: var(--data-viz-magenta-950);
50
+ $data-viz-orange-50: var(--data-viz-orange-50);
51
+ $data-viz-orange-100: var(--data-viz-orange-100);
52
+ $data-viz-orange-200: var(--data-viz-orange-200);
53
+ $data-viz-orange-300: var(--data-viz-orange-300);
54
+ $data-viz-orange-400: var(--data-viz-orange-400);
55
+ $data-viz-orange-500: var(--data-viz-orange-500);
56
+ $data-viz-orange-600: var(--data-viz-orange-600);
57
+ $data-viz-orange-700: var(--data-viz-orange-700);
58
+ $data-viz-orange-800: var(--data-viz-orange-800);
59
+ $data-viz-orange-900: var(--data-viz-orange-900);
60
+ $data-viz-orange-950: var(--data-viz-orange-950);
61
+ $theme-indigo-10: var(--theme-indigo-10);
62
+ $theme-indigo-50: var(--theme-indigo-50);
63
+ $theme-indigo-100: var(--theme-indigo-100);
64
+ $theme-indigo-200: var(--theme-indigo-200);
65
+ $theme-indigo-300: var(--theme-indigo-300);
66
+ $theme-indigo-400: var(--theme-indigo-400);
67
+ $theme-indigo-500: var(--theme-indigo-500);
68
+ $theme-indigo-600: var(--theme-indigo-600);
69
+ $theme-indigo-700: var(--theme-indigo-700);
70
+ $theme-indigo-800: var(--theme-indigo-800);
71
+ $theme-indigo-900: var(--theme-indigo-900);
72
+ $theme-indigo-950: var(--theme-indigo-950);
73
+ $theme-blue-10: var(--theme-blue-10);
74
+ $theme-blue-50: var(--theme-blue-50);
75
+ $theme-blue-100: var(--theme-blue-100);
76
+ $theme-blue-200: var(--theme-blue-200);
77
+ $theme-blue-300: var(--theme-blue-300);
78
+ $theme-blue-400: var(--theme-blue-400);
79
+ $theme-blue-500: var(--theme-blue-500);
80
+ $theme-blue-600: var(--theme-blue-600);
81
+ $theme-blue-700: var(--theme-blue-700);
82
+ $theme-blue-800: var(--theme-blue-800);
83
+ $theme-blue-900: var(--theme-blue-900);
84
+ $theme-blue-950: var(--theme-blue-950);
85
+ $theme-light-blue-10: var(--theme-light-blue-10);
86
+ $theme-light-blue-50: var(--theme-light-blue-50);
87
+ $theme-light-blue-100: var(--theme-light-blue-100);
88
+ $theme-light-blue-200: var(--theme-light-blue-200);
89
+ $theme-light-blue-300: var(--theme-light-blue-300);
90
+ $theme-light-blue-400: var(--theme-light-blue-400);
91
+ $theme-light-blue-500: var(--theme-light-blue-500);
92
+ $theme-light-blue-600: var(--theme-light-blue-600);
93
+ $theme-light-blue-700: var(--theme-light-blue-700);
94
+ $theme-light-blue-800: var(--theme-light-blue-800);
95
+ $theme-light-blue-900: var(--theme-light-blue-900);
96
+ $theme-light-blue-950: var(--theme-light-blue-950);
97
+ $theme-green-10: var(--theme-green-10);
98
+ $theme-green-50: var(--theme-green-50);
99
+ $theme-green-100: var(--theme-green-100);
100
+ $theme-green-200: var(--theme-green-200);
101
+ $theme-green-300: var(--theme-green-300);
102
+ $theme-green-400: var(--theme-green-400);
103
+ $theme-green-500: var(--theme-green-500);
104
+ $theme-green-600: var(--theme-green-600);
105
+ $theme-green-700: var(--theme-green-700);
106
+ $theme-green-800: var(--theme-green-800);
107
+ $theme-green-900: var(--theme-green-900);
108
+ $theme-green-950: var(--theme-green-950);
109
+ $theme-red-10: var(--theme-red-10);
110
+ $theme-red-50: var(--theme-red-50);
111
+ $theme-red-100: var(--theme-red-100);
112
+ $theme-red-200: var(--theme-red-200);
113
+ $theme-red-300: var(--theme-red-300);
114
+ $theme-red-400: var(--theme-red-400);
115
+ $theme-red-500: var(--theme-red-500);
116
+ $theme-red-600: var(--theme-red-600);
117
+ $theme-red-700: var(--theme-red-700);
118
+ $theme-red-800: var(--theme-red-800);
119
+ $theme-red-900: var(--theme-red-900);
120
+ $theme-red-950: var(--theme-red-950);
121
+ $theme-light-red-10: var(--theme-light-red-10);
122
+ $theme-light-red-50: var(--theme-light-red-50);
123
+ $theme-light-red-100: var(--theme-light-red-100);
124
+ $theme-light-red-200: var(--theme-light-red-200);
125
+ $theme-light-red-300: var(--theme-light-red-300);
126
+ $theme-light-red-400: var(--theme-light-red-400);
127
+ $theme-light-red-500: var(--theme-light-red-500);
128
+ $theme-light-red-600: var(--theme-light-red-600);
129
+ $theme-light-red-700: var(--theme-light-red-700);
130
+ $theme-light-red-800: var(--theme-light-red-800);
131
+ $theme-light-red-900: var(--theme-light-red-900);
132
+ $theme-light-red-950: var(--theme-light-red-950);
133
+ $black: var(--black);
134
+ $white: var(--white);
135
+ $blue-50: var(--blue-50);
136
+ $blue-100: var(--blue-100);
137
+ $blue-200: var(--blue-200);
138
+ $blue-300: var(--blue-300);
139
+ $blue-400: var(--blue-400);
140
+ $blue-500: var(--blue-500);
141
+ $blue-600: var(--blue-600);
142
+ $blue-700: var(--blue-700);
143
+ $blue-800: var(--blue-800);
144
+ $blue-900: var(--blue-900);
145
+ $blue-950: var(--blue-950);
146
+ $gray-10: var(--gray-10);
147
+ $gray-50: var(--gray-50);
148
+ $gray-100: var(--gray-100);
149
+ $gray-200: var(--gray-200);
150
+ $gray-300: var(--gray-300);
151
+ $gray-400: var(--gray-400);
152
+ $gray-500: var(--gray-500);
153
+ $gray-600: var(--gray-600);
154
+ $gray-700: var(--gray-700);
155
+ $gray-800: var(--gray-800);
156
+ $gray-900: var(--gray-900);
157
+ $gray-950: var(--gray-950);
158
+ $green-50: var(--green-50);
159
+ $green-100: var(--green-100);
160
+ $green-200: var(--green-200);
161
+ $green-300: var(--green-300);
162
+ $green-400: var(--green-400);
163
+ $green-500: var(--green-500);
164
+ $green-600: var(--green-600);
165
+ $green-700: var(--green-700);
166
+ $green-800: var(--green-800);
167
+ $green-900: var(--green-900);
168
+ $green-950: var(--green-950);
169
+ $orange-50: var(--orange-50);
170
+ $orange-100: var(--orange-100);
171
+ $orange-200: var(--orange-200);
172
+ $orange-300: var(--orange-300);
173
+ $orange-400: var(--orange-400);
174
+ $orange-500: var(--orange-500);
175
+ $orange-600: var(--orange-600);
176
+ $orange-700: var(--orange-700);
177
+ $orange-800: var(--orange-800);
178
+ $orange-900: var(--orange-900);
179
+ $orange-950: var(--orange-950);
180
+ $purple-50: var(--purple-50);
181
+ $purple-100: var(--purple-100);
182
+ $purple-200: var(--purple-200);
183
+ $purple-300: var(--purple-300);
184
+ $purple-400: var(--purple-400);
185
+ $purple-500: var(--purple-500);
186
+ $purple-600: var(--purple-600);
187
+ $purple-700: var(--purple-700);
188
+ $purple-800: var(--purple-800);
189
+ $purple-900: var(--purple-900);
190
+ $purple-950: var(--purple-950);
191
+ $red-50: var(--red-50);
192
+ $red-100: var(--red-100);
193
+ $red-200: var(--red-200);
194
+ $red-300: var(--red-300);
195
+ $red-400: var(--red-400);
196
+ $red-500: var(--red-500);
197
+ $red-600: var(--red-600);
198
+ $red-700: var(--red-700);
199
+ $red-800: var(--red-800);
200
+ $red-900: var(--red-900);
201
+ $red-950: var(--red-950);
202
+ $brand-charcoal: var(--brand-charcoal);
203
+ $brand-orange-01: var(--brand-orange-01);
204
+ $brand-orange-02: var(--brand-orange-02);
205
+ $brand-orange-03: var(--brand-orange-03);
206
+ $brand-purple-01: var(--brand-purple-01);
207
+ $brand-purple-02: var(--brand-purple-02);
208
+ $brand-gray-01: var(--brand-gray-01);
209
+ $brand-gray-02: var(--brand-gray-02);
210
+ $brand-gray-03: var(--brand-gray-03);
211
+ $brand-gray-04: var(--brand-gray-04);
212
+ $brand-gray-05: var(--brand-gray-05);
213
+ $t-gray-a-16: var(--t-gray-a-16);
214
+ $t-gray-a-24: var(--t-gray-a-24);
215
+ $t-gray-a-02: var(--t-gray-a-02);
216
+ $t-gray-a-04: var(--t-gray-a-04);
217
+ $t-gray-a-06: var(--t-gray-a-06);
218
+ $t-gray-a-08: var(--t-gray-a-08);
219
+ $t-white-a-16: var(--t-white-a-16);
220
+ $t-white-a-24: var(--t-white-a-24);
221
+ $t-white-a-36: var(--t-white-a-36);
222
+ $t-white-a-02: var(--t-white-a-02);
223
+ $t-white-a-04: var(--t-white-a-04);
224
+ $t-white-a-06: var(--t-white-a-06);
225
+ $t-white-a-08: var(--t-white-a-08);
226
+ $gl-line-height-12: var(--gl-line-height-12);
227
+ $gl-line-height-16: var(--gl-line-height-16);
228
+ $gl-line-height-20: var(--gl-line-height-20);
229
+ $gl-line-height-24: var(--gl-line-height-24);
230
+ $gl-line-height-28: var(--gl-line-height-28);
231
+ $gl-line-height-32: var(--gl-line-height-32);
232
+ $gl-line-height-36: var(--gl-line-height-36);
233
+ $gl-line-height-42: var(--gl-line-height-42);
234
+ $gl-line-height-44: var(--gl-line-height-44);
235
+ $gl-line-height-52: var(--gl-line-height-52);
236
+ $gl-text-primary: var(--gl-text-primary);
237
+ $gl-text-secondary: var(--gl-text-secondary);
238
+ $gl-text-tertiary: var(--gl-text-tertiary);
239
+ $gl-text-color-default: var(--gl-text-color-default);
240
+ $gl-text-color-subtle: var(--gl-text-color-subtle);
241
+ $gl-text-color-strong: var(--gl-text-color-strong);
242
+ $gl-text-color-heading: var(--gl-text-color-heading);
243
+ $gl-text-color-link: var(--gl-text-color-link);
244
+ $gl-text-color-danger: var(--gl-text-color-danger);
245
+ $gl-text-color-success: var(--gl-text-color-success);
246
+ $gl-text-color-disabled: var(--gl-text-color-disabled);
package/src/tokens/color.dark.tokens.stories.js CHANGED
@@ -1,4 +1,4 @@
1
- import COMPILED_TOKENS from '../../dist/tokens/json/tokens.dark.json';
1
+ import COMPILED_TOKENS from './build/json/tokens.dark.json';
2
2
  import { createDesignTokenStory } from './common_story_options';
3
3
 
4
4
  export const Default = createDesignTokenStory({
package/src/tokens/color.data_viz.dark.tokens.stories.js CHANGED
@@ -1,4 +1,4 @@
1
- import COMPILED_TOKENS from '../../dist/tokens/json/tokens.dark.json';
1
+ import COMPILED_TOKENS from './build/json/tokens.dark.json';
2
2
  import { createDesignTokenStory } from './common_story_options';
3
3
 
4
4
  export const DataVizGreen = createDesignTokenStory({ tokens: COMPILED_TOKENS['data-viz'].green });
package/src/tokens/color.data_viz.tokens.stories.js CHANGED
@@ -1,4 +1,4 @@
1
- import COMPILED_TOKENS from '../../dist/tokens/json/tokens.json';
1
+ import COMPILED_TOKENS from './build/json/tokens.json';
2
2
  import { createDesignTokenStory } from './common_story_options';
3
3
 
4
4
  export const DataVizGreen = createDesignTokenStory({ tokens: COMPILED_TOKENS['data-viz'].green });
package/src/tokens/color.theme.dark.tokens.stories.js CHANGED
@@ -1,4 +1,4 @@
1
- import COMPILED_TOKENS from '../../dist/tokens/json/tokens.dark.json';
1
+ import COMPILED_TOKENS from './build/json/tokens.dark.json';
2
2
  import { createDesignTokenStory } from './common_story_options';
3
3
 
4
4
  export const ThemeIndigo = createDesignTokenStory({ tokens: COMPILED_TOKENS.theme.indigo });
package/src/tokens/color.theme.tokens.stories.js CHANGED
@@ -1,4 +1,4 @@
1
- import COMPILED_TOKENS from '../../dist/tokens/json/tokens.json';
1
+ import COMPILED_TOKENS from './build/json/tokens.json';
2
2
  import { createDesignTokenStory } from './common_story_options';
3
3
 
4
4
  export const ThemeIndigo = createDesignTokenStory({ tokens: COMPILED_TOKENS.theme.indigo });
package/src/tokens/color.tokens.stories.js CHANGED
@@ -1,4 +1,4 @@
1
- import COMPILED_TOKENS from '../../dist/tokens/json/tokens.json';
1
+ import COMPILED_TOKENS from './build/json/tokens.json';
2
2
  import { createDesignTokenStory } from './common_story_options';
3
3
 
4
4
  export const Default = createDesignTokenStory({
package/src/tokens/color.transparency.tokens.stories.js CHANGED
@@ -1,4 +1,4 @@
1
- import COMPILED_TOKENS from '../../dist/tokens/json/tokens.json';
1
+ import COMPILED_TOKENS from './build/json/tokens.json';
2
2
  import { createDesignTokenStory } from './common_story_options';
3
3
 
4
4
  export const Gray = createDesignTokenStory({ tokens: COMPILED_TOKENS['t-gray-a'] });
package/src/tokens/common_story_options.js CHANGED
@@ -1,4 +1,4 @@
1
- import { WHITE, GRAY_950 } from '../../dist/tokens/js/tokens';
1
+ import { WHITE, GRAY_950 } from './build/js/tokens';
2
2
  import TokensStory from './tokens_story.vue';
3
3
 
4
4
  export const createDesignTokenStory = ({
package/src/tokens/text.dark.tokens.stories.js CHANGED
@@ -1,4 +1,4 @@
1
- import COMPILED_TOKENS from '../../dist/tokens/json/tokens.dark.json';
1
+ import COMPILED_TOKENS from './build/json/tokens.dark.json';
2
2
  import { createDesignTokenStory } from './common_story_options';
3
3
 
4
4
  export const Default = createDesignTokenStory({
package/src/tokens/text.tokens.stories.js CHANGED
@@ -1,4 +1,4 @@
1
- import COMPILED_TOKENS from '../../dist/tokens/json/tokens.json';
1
+ import COMPILED_TOKENS from './build/json/tokens.json';
2
2
  import { createDesignTokenStory } from './common_story_options';
3
3
 
4
4
  export const Default = createDesignTokenStory({
package/src/utils/charts/config.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import castArray from 'lodash/castArray';
2
2
  import merge from 'lodash/merge';
3
- import { BLUE_500 } from '../../../dist/tokens/js/tokens';
3
+ import { BLUE_500 } from '../../tokens/build/js/tokens';
4
4
  import { GlBreakpointInstance } from '../breakpoints';
5
5
  import { columnOptions } from '../constants';
6
6
  import { areDatesEqual } from '../datetime_utility';
package/src/utils/charts/mock_data.js CHANGED
@@ -1,4 +1,4 @@
1
- import { BLUE_500 } from '../../../dist/tokens/js/tokens';
1
+ import { BLUE_500 } from '../../tokens/build/js/tokens';
2
2
  import { hexToRgba } from '../utils';
3
3
  import { colorFromDefaultPalette } from './theme';
4
4
 
package/src/utils/charts/theme.js CHANGED
@@ -63,7 +63,7 @@ import {
63
63
  DATA_VIZ_ORANGE_800,
64
64
  DATA_VIZ_ORANGE_950,
65
65
  DATA_VIZ_ORANGE_900,
66
- } from '../../../dist/tokens/js/tokens';
66
+ } from '../../tokens/build/js/tokens';
67
67
  import { scrollHandleSvgPath } from '../svgs/svg_paths';
68
68
  import { hexToRgba } from '../utils';
69
69