@atlaskit/editor-core 187.31.1 → 187.31.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.
Files changed (10) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/ui/ConfigPanel/Fields/ColorPicker.js +58 -65
  3. package/dist/cjs/version-wrapper.js +1 -1
  4. package/dist/es2019/ui/ConfigPanel/Fields/ColorPicker.js +58 -65
  5. package/dist/es2019/version-wrapper.js +1 -1
  6. package/dist/esm/ui/ConfigPanel/Fields/ColorPicker.js +58 -65
  7. package/dist/esm/version-wrapper.js +1 -1
  8. package/dist/types/ui/ConfigPanel/Fields/ColorPicker.d.ts +4 -4
  9. package/dist/types-ts4.5/ui/ConfigPanel/Fields/ColorPicker.d.ts +4 -4
  10. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/editor-core
2
2
 
3
+ ## 187.31.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [`dbccd831543`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dbccd831543) - [ux] tokenize ColorPicker, make charts package compatible with tokens, make check mark compatible with tokens
8
+
3
9
  ## 187.31.1
4
10
 
5
11
  ### Patch Changes
package/dist/cjs/ui/ConfigPanel/Fields/ColorPicker.js CHANGED
@@ -10,7 +10,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
10
10
  var _react = require("@emotion/react");
11
11
  var _react2 = require("react");
12
12
  var _form = require("@atlaskit/form");
13
- var _editorPalette = require("@atlaskit/editor-palette");
14
13
  var _common = require("../../../ui/ColorPalette/Palettes/common");
15
14
  var _utils = require("../utils");
16
15
  var _RequiredIndicator = require("./common/RequiredIndicator");
@@ -31,105 +30,105 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
31
30
 
32
31
  var colorPalette = [{
33
32
  label: 'Light Blue',
34
- value: '#7AB2FFFF'
33
+ value: "var(--ds-background-accent-blue-subtle, #7AB2FF)"
35
34
  },
36
35
  // 400
37
36
  {
38
37
  label: 'Light Green',
39
- value: '#6BE1B0FF'
38
+ value: "var(--ds-background-accent-green-subtle, #6BE1B0)"
40
39
  },
41
40
  // 400
42
41
  {
43
42
  label: 'Light Yellow',
44
- value: '#FFDB57FF'
43
+ value: "var(--ds-background-accent-yellow-subtle, #FFDB57)"
45
44
  },
46
45
  // 400
47
46
  {
48
47
  label: 'Light Red',
49
- value: '#FF8F73FF'
48
+ value: "var(--ds-background-accent-red-subtle, #FF8F73)"
50
49
  },
51
50
  // 400
52
51
  {
53
52
  label: 'Light Purple',
54
- value: '#B5A7FBFF'
53
+ value: "var(--ds-background-accent-purple-subtle, #B5A7FB)"
55
54
  },
56
55
  // 400
57
56
 
58
57
  {
59
58
  label: 'Blue',
60
- value: '#247FFFFF'
59
+ value: "var(--ds-chart-blue-bold, #247FFF)"
61
60
  },
62
61
  // 600
63
62
  {
64
63
  label: 'Green',
65
- value: '#23A971FF'
64
+ value: "var(--ds-chart-green-bold, #23A971)"
66
65
  },
67
66
  // 600
68
67
  {
69
68
  label: 'Yellow',
70
- value: '#FFBE33FF'
69
+ value: "var(--ds-chart-yellow-bold, #FFBE33)"
71
70
  },
72
71
  // 600
73
72
  {
74
73
  label: 'Red',
75
- value: '#FC552CFF'
74
+ value: "var(--ds-chart-red-bold, #FC552C)"
76
75
  },
77
76
  // 600
78
77
  {
79
78
  label: 'Purple',
80
- value: '#8B77EEFF'
79
+ value: "var(--ds-chart-purple-bold, #8B77EE)"
81
80
  },
82
81
  // 600
83
82
 
84
83
  {
85
84
  label: 'Dark Blue',
86
- value: '#0055CCFF'
85
+ value: "var(--ds-chart-blue-bolder, #0055CC)"
87
86
  },
88
87
  // 800
89
88
  {
90
89
  label: 'Dark Green',
91
- value: '#177D52FF'
90
+ value: "var(--ds-chart-green-bolder, #177D52)"
92
91
  },
93
92
  // 800
94
93
  {
95
94
  label: 'Dark Yellow',
96
- value: '#FF9D00FF'
95
+ value: "var(--ds-chart-yellow-bolder, #FF9D00)"
97
96
  },
98
97
  // 800
99
98
  {
100
99
  label: 'Dark Red',
101
- value: '#D32D03FF'
100
+ value: "var(--ds-chart-red-bolder, #D32D03)"
102
101
  },
103
102
  // 800
104
103
  {
105
104
  label: 'Dark Purple',
106
- value: '#5A43D0FF'
105
+ value: "var(--ds-chart-purple-bolder, #5A43D0)"
107
106
  },
108
107
  // 800
109
108
 
110
109
  {
111
110
  label: 'Darker Blue',
112
- value: '#003884FF'
111
+ value: "var(--ds-chart-blue-boldest, #003884)"
113
112
  },
114
113
  // 1000
115
114
  {
116
115
  label: 'Darker Green',
117
- value: '#055C3FFF'
116
+ value: "var(--ds-chart-green-boldest, #055C3F)"
118
117
  },
119
118
  // 1000
120
119
  {
121
120
  label: 'Darker Yellow',
122
- value: '#946104FF'
121
+ value: "var(--ds-chart-yellow-boldest, #946104)"
123
122
  },
124
123
  // 1000
125
124
  {
126
125
  label: 'Darker Red',
127
- value: '#A32000FF'
126
+ value: "var(--ds-chart-red-boldest, #A32000)"
128
127
  },
129
128
  // 1000
130
129
  {
131
130
  label: 'Darker Purple',
132
- value: '#44368BFF'
131
+ value: "var(--ds-chart-purple-boldest, #44368B)"
133
132
  } // 1000
134
133
  ].map(function (color) {
135
134
  return _objectSpread(_objectSpread({}, color), {}, {
@@ -144,185 +143,185 @@ var colorPalette = [{
144
143
  exports.colorPalette = colorPalette;
145
144
  var extendedColorPalette = [{
146
145
  label: 'Darker Blue',
147
- value: '#003884'
146
+ value: "var(--ds-chart-blue-boldest, #003884)"
148
147
  },
149
148
  // 1000
150
149
  {
151
150
  label: 'Darker Teal',
152
- value: '#206B74'
151
+ value: "var(--ds-chart-teal-boldest, #206B74)"
153
152
  },
154
153
  // 1000
155
154
  {
156
155
  label: 'Darker Green',
157
- value: '#055C3F'
156
+ value: "var(--ds-chart-green-boldest, #055C3F)"
158
157
  },
159
158
  // 1000
160
159
  {
161
160
  label: 'Darker Yellow',
162
- value: '#946104'
161
+ value: "var(--ds-chart-yellow-boldest, #946104)"
163
162
  },
164
163
  // 1000
165
164
  {
166
165
  label: 'Darker Orange',
167
- value: '#974F0C'
166
+ value: "var(--ds-chart-orange-boldest, #974F0C)"
168
167
  },
169
168
  // 1000
170
169
  {
171
170
  label: 'Darker Red',
172
- value: '#A32000'
171
+ value: "var(--ds-chart-red-boldest, #A32000)"
173
172
  },
174
173
  // 1000
175
174
  {
176
175
  label: 'Darker Magenta',
177
- value: '#943D73'
176
+ value: "var(--ds-chart-magenta-boldest, #943D73)"
178
177
  },
179
178
  // 1000
180
179
  {
181
180
  label: 'Darker Purple',
182
- value: '#44368B'
181
+ value: "var(--ds-chart-purple-boldest, #44368B)"
183
182
  },
184
183
  // 1000
185
184
  {
186
185
  label: 'Darker Gray',
187
- value: '#44546F'
186
+ value: "var(--ds-chart-gray-boldest, #44546F)"
188
187
  },
189
188
  // 1000
190
189
 
191
190
  {
192
191
  label: 'Dark Blue',
193
- value: '#0055CC'
192
+ value: "var(--ds-chart-blue-bolder, #0055CC)"
194
193
  },
195
194
  // 800
196
195
  {
197
196
  label: 'Dark Teal',
198
- value: '#1D7F8C'
197
+ value: "var(--ds-chart-teal-bolder, #1D7F8C)"
199
198
  },
200
199
  // 800
201
200
  {
202
201
  label: 'Dark Green',
203
- value: '#177D52'
202
+ value: "var(--ds-chart-green-bolder, #177D52)"
204
203
  },
205
204
  // 800
206
205
  {
207
206
  label: 'Dark Yellow',
208
- value: '#FF9D00'
207
+ value: "var(--ds-chart-yellow-bolder, #FF9D00)"
209
208
  },
210
209
  // 800
211
210
  {
212
211
  label: 'Dark Orange',
213
- value: '#B65C02'
212
+ value: "var(--ds-chart-orange-bolder, #B65C02)"
214
213
  },
215
214
  // 800
216
215
  {
217
216
  label: 'Dark Red',
218
- value: '#D32D03'
217
+ value: "var(--ds-chart-red-bolder, #D32D03)"
219
218
  },
220
219
  // 800
221
220
  {
222
221
  label: 'Dark Magenta',
223
- value: '#CD519D'
222
+ value: "var(--ds-chart-magenta-bolder, #CD519D)"
224
223
  },
225
224
  // 800
226
225
  {
227
226
  label: 'Dark Purple',
228
- value: '#5A43D0'
227
+ value: "var(--ds-chart-purple-bolder, #5A43D0)"
229
228
  },
230
229
  // 800
231
230
  {
232
231
  label: 'Dark Gray',
233
- value: '#758195'
232
+ value: "var(--ds-chart-gray-bolder, #758195)"
234
233
  },
235
234
  // 800
236
235
 
237
236
  {
238
237
  label: 'Blue',
239
- value: '#247FFF'
238
+ value: "var(--ds-chart-blue-bold, #247FFF)"
240
239
  },
241
240
  // 600
242
241
  {
243
242
  label: 'Teal',
244
- value: '#1D9AAA'
243
+ value: "var(--ds-chart-teal-bold, #1D9AAA)"
245
244
  },
246
245
  // 600
247
246
  {
248
247
  label: 'Green',
249
- value: '#23A971'
248
+ value: "var(--ds-chart-green-bold, #23A971)"
250
249
  },
251
250
  // 600
252
251
  {
253
252
  label: 'Yellow',
254
- value: '#FFBE33'
253
+ value: "var(--ds-chart-yellow-bold, #FFBE33)"
255
254
  },
256
255
  // 600
257
256
  {
258
257
  label: 'Orange',
259
- value: '#D97008'
258
+ value: "var(--ds-chart-orange-bold, #D97008)"
260
259
  },
261
260
  // 600
262
261
  {
263
262
  label: 'Red',
264
- value: '#FC552C'
263
+ value: "var(--ds-chart-red-bold, #FC552C)"
265
264
  },
266
265
  // 600
267
266
  {
268
267
  label: 'Magenta',
269
- value: '#DA62AC'
268
+ value: "var(--ds-chart-magenta-bold, #DA62AC)"
270
269
  },
271
270
  // 600
272
271
  {
273
272
  label: 'Purple',
274
- value: '#8B77EE'
273
+ value: "var(--ds-chart-purple-bold, #8B77EE)"
275
274
  },
276
275
  // 600
277
276
  {
278
277
  label: 'Gray',
279
- value: '#8590A2'
278
+ value: "var(--ds-chart-gray-bold, #8590A2)"
280
279
  },
281
280
  // 600
282
281
 
283
282
  {
284
283
  label: 'Light Blue',
285
- value: '#7AB2FF'
284
+ value: "var(--ds-background-accent-blue-subtle, #7AB2FF)"
286
285
  },
287
286
  // 400
288
287
  {
289
288
  label: 'Light Teal',
290
- value: '#60C6D2'
289
+ value: "var(--ds-background-accent-teal-subtle, #60C6D2)"
291
290
  },
292
291
  // 400
293
292
  {
294
293
  label: 'Light Green',
295
- value: '#6BE1B0'
294
+ value: "var(--ds-background-accent-green-subtle, #6BE1B0)"
296
295
  },
297
296
  // 400
298
297
  {
299
298
  label: 'Light Yellow',
300
- value: '#FFDB57'
299
+ value: "var(--ds-background-accent-yellow-subtle, #FFDB57)"
301
300
  },
302
301
  // 400
303
302
  {
304
303
  label: 'Light Orange',
305
- value: '#FAA53D'
304
+ value: "var(--ds-background-accent-orange-subtle, #FAA53D)"
306
305
  },
307
306
  // 400
308
307
  {
309
308
  label: 'Light Red',
310
- value: '#FF8F73'
309
+ value: "var(--ds-background-accent-red-subtle, #FF8F73)"
311
310
  },
312
311
  // 400
313
312
  {
314
313
  label: 'Light Magenta',
315
- value: '#E774BB'
314
+ value: "var(--ds-background-accent-magenta-subtle, #E774BB)"
316
315
  },
317
316
  // 400
318
317
  {
319
318
  label: 'Light Purple',
320
- value: '#B5A7FB'
319
+ value: "var(--ds-background-accent-purple-subtle, #B5A7FB)"
321
320
  },
322
321
  // 400
323
322
  {
324
323
  label: 'Light Gray',
325
- value: '#8993A5'
324
+ value: "var(--ds-background-accent-gray-subtle, #8993A5)"
326
325
  } // 400
327
326
  ].map(function (color) {
328
327
  return _objectSpread(_objectSpread({}, color), {}, {
@@ -355,16 +354,10 @@ var ColorPicker = function ColorPicker(props) {
355
354
  useSomewhatSemanticTextColorNames = _ref.useSomewhatSemanticTextColorNames,
356
355
  expandedChartColors = _ref.expandedChartColors;
357
356
  return expandedChartColors ? (0, _react.jsx)(_ColorPickerButton.default, {
358
- title: title
359
- // Original color palette had hex code with alpha channel.
360
- // However, alpha channel was always FF, and it was not used
361
- // Expanded color palette does not have alpha channel, so
362
- // removing last two characters from hex code with alpha here.
363
- ,
364
- currentColor: currentColor.substring(0, 7),
357
+ title: title,
358
+ currentColor: currentColor,
365
359
  onChange: onColorChange,
366
360
  colorPalette: extendedColorPalette,
367
- hexToPaletteColor: _editorPalette.hexToEditorTableChartsPaletteColor,
368
361
  paletteColorTooltipMessages: _ColorPalette.chartsColorPaletteTooltipMessages
369
362
  // We did not want to create new FF or update
370
363
  // useSomewhatSemanticTextColorNames name
package/dist/cjs/version-wrapper.js CHANGED
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.version = exports.nextMajorVersion = exports.name = void 0;
7
7
  var name = "@atlaskit/editor-core";
8
8
  exports.name = name;
9
- var version = "187.31.1";
9
+ var version = "187.31.2";
10
10
  exports.version = version;
11
11
  var nextMajorVersion = function nextMajorVersion() {
12
12
  return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
package/dist/es2019/ui/ConfigPanel/Fields/ColorPicker.js CHANGED
@@ -2,7 +2,6 @@
2
2
  import { jsx, css } from '@emotion/react';
3
3
  import { Fragment } from 'react';
4
4
  import { Field } from '@atlaskit/form';
5
- import { hexToEditorTableChartsPaletteColor } from '@atlaskit/editor-palette';
6
5
  import { DEFAULT_BORDER_COLOR } from '../../../ui/ColorPalette/Palettes/common';
7
6
  import { validate } from '../utils';
8
7
  import { requiredIndicator } from './common/RequiredIndicator';
@@ -20,105 +19,105 @@ import { chartsColorPaletteTooltipMessages } from '../../../ui/ColorPalette';
20
19
 
21
20
  export const colorPalette = [{
22
21
  label: 'Light Blue',
23
- value: '#7AB2FFFF'
22
+ value: "var(--ds-background-accent-blue-subtle, #7AB2FF)"
24
23
  },
25
24
  // 400
26
25
  {
27
26
  label: 'Light Green',
28
- value: '#6BE1B0FF'
27
+ value: "var(--ds-background-accent-green-subtle, #6BE1B0)"
29
28
  },
30
29
  // 400
31
30
  {
32
31
  label: 'Light Yellow',
33
- value: '#FFDB57FF'
32
+ value: "var(--ds-background-accent-yellow-subtle, #FFDB57)"
34
33
  },
35
34
  // 400
36
35
  {
37
36
  label: 'Light Red',
38
- value: '#FF8F73FF'
37
+ value: "var(--ds-background-accent-red-subtle, #FF8F73)"
39
38
  },
40
39
  // 400
41
40
  {
42
41
  label: 'Light Purple',
43
- value: '#B5A7FBFF'
42
+ value: "var(--ds-background-accent-purple-subtle, #B5A7FB)"
44
43
  },
45
44
  // 400
46
45
 
47
46
  {
48
47
  label: 'Blue',
49
- value: '#247FFFFF'
48
+ value: "var(--ds-chart-blue-bold, #247FFF)"
50
49
  },
51
50
  // 600
52
51
  {
53
52
  label: 'Green',
54
- value: '#23A971FF'
53
+ value: "var(--ds-chart-green-bold, #23A971)"
55
54
  },
56
55
  // 600
57
56
  {
58
57
  label: 'Yellow',
59
- value: '#FFBE33FF'
58
+ value: "var(--ds-chart-yellow-bold, #FFBE33)"
60
59
  },
61
60
  // 600
62
61
  {
63
62
  label: 'Red',
64
- value: '#FC552CFF'
63
+ value: "var(--ds-chart-red-bold, #FC552C)"
65
64
  },
66
65
  // 600
67
66
  {
68
67
  label: 'Purple',
69
- value: '#8B77EEFF'
68
+ value: "var(--ds-chart-purple-bold, #8B77EE)"
70
69
  },
71
70
  // 600
72
71
 
73
72
  {
74
73
  label: 'Dark Blue',
75
- value: '#0055CCFF'
74
+ value: "var(--ds-chart-blue-bolder, #0055CC)"
76
75
  },
77
76
  // 800
78
77
  {
79
78
  label: 'Dark Green',
80
- value: '#177D52FF'
79
+ value: "var(--ds-chart-green-bolder, #177D52)"
81
80
  },
82
81
  // 800
83
82
  {
84
83
  label: 'Dark Yellow',
85
- value: '#FF9D00FF'
84
+ value: "var(--ds-chart-yellow-bolder, #FF9D00)"
86
85
  },
87
86
  // 800
88
87
  {
89
88
  label: 'Dark Red',
90
- value: '#D32D03FF'
89
+ value: "var(--ds-chart-red-bolder, #D32D03)"
91
90
  },
92
91
  // 800
93
92
  {
94
93
  label: 'Dark Purple',
95
- value: '#5A43D0FF'
94
+ value: "var(--ds-chart-purple-bolder, #5A43D0)"
96
95
  },
97
96
  // 800
98
97
 
99
98
  {
100
99
  label: 'Darker Blue',
101
- value: '#003884FF'
100
+ value: "var(--ds-chart-blue-boldest, #003884)"
102
101
  },
103
102
  // 1000
104
103
  {
105
104
  label: 'Darker Green',
106
- value: '#055C3FFF'
105
+ value: "var(--ds-chart-green-boldest, #055C3F)"
107
106
  },
108
107
  // 1000
109
108
  {
110
109
  label: 'Darker Yellow',
111
- value: '#946104FF'
110
+ value: "var(--ds-chart-yellow-boldest, #946104)"
112
111
  },
113
112
  // 1000
114
113
  {
115
114
  label: 'Darker Red',
116
- value: '#A32000FF'
115
+ value: "var(--ds-chart-red-boldest, #A32000)"
117
116
  },
118
117
  // 1000
119
118
  {
120
119
  label: 'Darker Purple',
121
- value: '#44368BFF'
120
+ value: "var(--ds-chart-purple-boldest, #44368B)"
122
121
  } // 1000
123
122
  ].map(color => ({
124
123
  ...color,
@@ -131,185 +130,185 @@ export const colorPalette = [{
131
130
  */
132
131
  export const extendedColorPalette = [{
133
132
  label: 'Darker Blue',
134
- value: '#003884'
133
+ value: "var(--ds-chart-blue-boldest, #003884)"
135
134
  },
136
135
  // 1000
137
136
  {
138
137
  label: 'Darker Teal',
139
- value: '#206B74'
138
+ value: "var(--ds-chart-teal-boldest, #206B74)"
140
139
  },
141
140
  // 1000
142
141
  {
143
142
  label: 'Darker Green',
144
- value: '#055C3F'
143
+ value: "var(--ds-chart-green-boldest, #055C3F)"
145
144
  },
146
145
  // 1000
147
146
  {
148
147
  label: 'Darker Yellow',
149
- value: '#946104'
148
+ value: "var(--ds-chart-yellow-boldest, #946104)"
150
149
  },
151
150
  // 1000
152
151
  {
153
152
  label: 'Darker Orange',
154
- value: '#974F0C'
153
+ value: "var(--ds-chart-orange-boldest, #974F0C)"
155
154
  },
156
155
  // 1000
157
156
  {
158
157
  label: 'Darker Red',
159
- value: '#A32000'
158
+ value: "var(--ds-chart-red-boldest, #A32000)"
160
159
  },
161
160
  // 1000
162
161
  {
163
162
  label: 'Darker Magenta',
164
- value: '#943D73'
163
+ value: "var(--ds-chart-magenta-boldest, #943D73)"
165
164
  },
166
165
  // 1000
167
166
  {
168
167
  label: 'Darker Purple',
169
- value: '#44368B'
168
+ value: "var(--ds-chart-purple-boldest, #44368B)"
170
169
  },
171
170
  // 1000
172
171
  {
173
172
  label: 'Darker Gray',
174
- value: '#44546F'
173
+ value: "var(--ds-chart-gray-boldest, #44546F)"
175
174
  },
176
175
  // 1000
177
176
 
178
177
  {
179
178
  label: 'Dark Blue',
180
- value: '#0055CC'
179
+ value: "var(--ds-chart-blue-bolder, #0055CC)"
181
180
  },
182
181
  // 800
183
182
  {
184
183
  label: 'Dark Teal',
185
- value: '#1D7F8C'
184
+ value: "var(--ds-chart-teal-bolder, #1D7F8C)"
186
185
  },
187
186
  // 800
188
187
  {
189
188
  label: 'Dark Green',
190
- value: '#177D52'
189
+ value: "var(--ds-chart-green-bolder, #177D52)"
191
190
  },
192
191
  // 800
193
192
  {
194
193
  label: 'Dark Yellow',
195
- value: '#FF9D00'
194
+ value: "var(--ds-chart-yellow-bolder, #FF9D00)"
196
195
  },
197
196
  // 800
198
197
  {
199
198
  label: 'Dark Orange',
200
- value: '#B65C02'
199
+ value: "var(--ds-chart-orange-bolder, #B65C02)"
201
200
  },
202
201
  // 800
203
202
  {
204
203
  label: 'Dark Red',
205
- value: '#D32D03'
204
+ value: "var(--ds-chart-red-bolder, #D32D03)"
206
205
  },
207
206
  // 800
208
207
  {
209
208
  label: 'Dark Magenta',
210
- value: '#CD519D'
209
+ value: "var(--ds-chart-magenta-bolder, #CD519D)"
211
210
  },
212
211
  // 800
213
212
  {
214
213
  label: 'Dark Purple',
215
- value: '#5A43D0'
214
+ value: "var(--ds-chart-purple-bolder, #5A43D0)"
216
215
  },
217
216
  // 800
218
217
  {
219
218
  label: 'Dark Gray',
220
- value: '#758195'
219
+ value: "var(--ds-chart-gray-bolder, #758195)"
221
220
  },
222
221
  // 800
223
222
 
224
223
  {
225
224
  label: 'Blue',
226
- value: '#247FFF'
225
+ value: "var(--ds-chart-blue-bold, #247FFF)"
227
226
  },
228
227
  // 600
229
228
  {
230
229
  label: 'Teal',
231
- value: '#1D9AAA'
230
+ value: "var(--ds-chart-teal-bold, #1D9AAA)"
232
231
  },
233
232
  // 600
234
233
  {
235
234
  label: 'Green',
236
- value: '#23A971'
235
+ value: "var(--ds-chart-green-bold, #23A971)"
237
236
  },
238
237
  // 600
239
238
  {
240
239
  label: 'Yellow',
241
- value: '#FFBE33'
240
+ value: "var(--ds-chart-yellow-bold, #FFBE33)"
242
241
  },
243
242
  // 600
244
243
  {
245
244
  label: 'Orange',
246
- value: '#D97008'
245
+ value: "var(--ds-chart-orange-bold, #D97008)"
247
246
  },
248
247
  // 600
249
248
  {
250
249
  label: 'Red',
251
- value: '#FC552C'
250
+ value: "var(--ds-chart-red-bold, #FC552C)"
252
251
  },
253
252
  // 600
254
253
  {
255
254
  label: 'Magenta',
256
- value: '#DA62AC'
255
+ value: "var(--ds-chart-magenta-bold, #DA62AC)"
257
256
  },
258
257
  // 600
259
258
  {
260
259
  label: 'Purple',
261
- value: '#8B77EE'
260
+ value: "var(--ds-chart-purple-bold, #8B77EE)"
262
261
  },
263
262
  // 600
264
263
  {
265
264
  label: 'Gray',
266
- value: '#8590A2'
265
+ value: "var(--ds-chart-gray-bold, #8590A2)"
267
266
  },
268
267
  // 600
269
268
 
270
269
  {
271
270
  label: 'Light Blue',
272
- value: '#7AB2FF'
271
+ value: "var(--ds-background-accent-blue-subtle, #7AB2FF)"
273
272
  },
274
273
  // 400
275
274
  {
276
275
  label: 'Light Teal',
277
- value: '#60C6D2'
276
+ value: "var(--ds-background-accent-teal-subtle, #60C6D2)"
278
277
  },
279
278
  // 400
280
279
  {
281
280
  label: 'Light Green',
282
- value: '#6BE1B0'
281
+ value: "var(--ds-background-accent-green-subtle, #6BE1B0)"
283
282
  },
284
283
  // 400
285
284
  {
286
285
  label: 'Light Yellow',
287
- value: '#FFDB57'
286
+ value: "var(--ds-background-accent-yellow-subtle, #FFDB57)"
288
287
  },
289
288
  // 400
290
289
  {
291
290
  label: 'Light Orange',
292
- value: '#FAA53D'
291
+ value: "var(--ds-background-accent-orange-subtle, #FAA53D)"
293
292
  },
294
293
  // 400
295
294
  {
296
295
  label: 'Light Red',
297
- value: '#FF8F73'
296
+ value: "var(--ds-background-accent-red-subtle, #FF8F73)"
298
297
  },
299
298
  // 400
300
299
  {
301
300
  label: 'Light Magenta',
302
- value: '#E774BB'
301
+ value: "var(--ds-background-accent-magenta-subtle, #E774BB)"
303
302
  },
304
303
  // 400
305
304
  {
306
305
  label: 'Light Purple',
307
- value: '#B5A7FB'
306
+ value: "var(--ds-background-accent-purple-subtle, #B5A7FB)"
308
307
  },
309
308
  // 400
310
309
  {
311
310
  label: 'Light Gray',
312
- value: '#8993A5'
311
+ value: "var(--ds-background-accent-gray-subtle, #8993A5)"
313
312
  } // 400
314
313
  ].map(color => ({
315
314
  ...color,
@@ -350,16 +349,10 @@ const ColorPicker = props => {
350
349
  expandedChartColors: false
351
350
  };
352
351
  return expandedChartColors ? jsx(ColorPickerButton, {
353
- title: title
354
- // Original color palette had hex code with alpha channel.
355
- // However, alpha channel was always FF, and it was not used
356
- // Expanded color palette does not have alpha channel, so
357
- // removing last two characters from hex code with alpha here.
358
- ,
359
- currentColor: currentColor.substring(0, 7),
352
+ title: title,
353
+ currentColor: currentColor,
360
354
  onChange: onColorChange,
361
355
  colorPalette: extendedColorPalette,
362
- hexToPaletteColor: hexToEditorTableChartsPaletteColor,
363
356
  paletteColorTooltipMessages: chartsColorPaletteTooltipMessages
364
357
  // We did not want to create new FF or update
365
358
  // useSomewhatSemanticTextColorNames name
package/dist/es2019/version-wrapper.js CHANGED
@@ -1,5 +1,5 @@
1
1
  export const name = "@atlaskit/editor-core";
2
- export const version = "187.31.1";
2
+ export const version = "187.31.2";
3
3
  export const nextMajorVersion = () => {
4
4
  return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
5
5
  };
package/dist/esm/ui/ConfigPanel/Fields/ColorPicker.js CHANGED
@@ -7,7 +7,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
7
7
  import { jsx, css } from '@emotion/react';
8
8
  import { Fragment } from 'react';
9
9
  import { Field } from '@atlaskit/form';
10
- import { hexToEditorTableChartsPaletteColor } from '@atlaskit/editor-palette';
11
10
  import { DEFAULT_BORDER_COLOR } from '../../../ui/ColorPalette/Palettes/common';
12
11
  import { validate as _validate } from '../utils';
13
12
  import { requiredIndicator } from './common/RequiredIndicator';
@@ -25,105 +24,105 @@ import { chartsColorPaletteTooltipMessages } from '../../../ui/ColorPalette';
25
24
 
26
25
  export var colorPalette = [{
27
26
  label: 'Light Blue',
28
- value: '#7AB2FFFF'
27
+ value: "var(--ds-background-accent-blue-subtle, #7AB2FF)"
29
28
  },
30
29
  // 400
31
30
  {
32
31
  label: 'Light Green',
33
- value: '#6BE1B0FF'
32
+ value: "var(--ds-background-accent-green-subtle, #6BE1B0)"
34
33
  },
35
34
  // 400
36
35
  {
37
36
  label: 'Light Yellow',
38
- value: '#FFDB57FF'
37
+ value: "var(--ds-background-accent-yellow-subtle, #FFDB57)"
39
38
  },
40
39
  // 400
41
40
  {
42
41
  label: 'Light Red',
43
- value: '#FF8F73FF'
42
+ value: "var(--ds-background-accent-red-subtle, #FF8F73)"
44
43
  },
45
44
  // 400
46
45
  {
47
46
  label: 'Light Purple',
48
- value: '#B5A7FBFF'
47
+ value: "var(--ds-background-accent-purple-subtle, #B5A7FB)"
49
48
  },
50
49
  // 400
51
50
 
52
51
  {
53
52
  label: 'Blue',
54
- value: '#247FFFFF'
53
+ value: "var(--ds-chart-blue-bold, #247FFF)"
55
54
  },
56
55
  // 600
57
56
  {
58
57
  label: 'Green',
59
- value: '#23A971FF'
58
+ value: "var(--ds-chart-green-bold, #23A971)"
60
59
  },
61
60
  // 600
62
61
  {
63
62
  label: 'Yellow',
64
- value: '#FFBE33FF'
63
+ value: "var(--ds-chart-yellow-bold, #FFBE33)"
65
64
  },
66
65
  // 600
67
66
  {
68
67
  label: 'Red',
69
- value: '#FC552CFF'
68
+ value: "var(--ds-chart-red-bold, #FC552C)"
70
69
  },
71
70
  // 600
72
71
  {
73
72
  label: 'Purple',
74
- value: '#8B77EEFF'
73
+ value: "var(--ds-chart-purple-bold, #8B77EE)"
75
74
  },
76
75
  // 600
77
76
 
78
77
  {
79
78
  label: 'Dark Blue',
80
- value: '#0055CCFF'
79
+ value: "var(--ds-chart-blue-bolder, #0055CC)"
81
80
  },
82
81
  // 800
83
82
  {
84
83
  label: 'Dark Green',
85
- value: '#177D52FF'
84
+ value: "var(--ds-chart-green-bolder, #177D52)"
86
85
  },
87
86
  // 800
88
87
  {
89
88
  label: 'Dark Yellow',
90
- value: '#FF9D00FF'
89
+ value: "var(--ds-chart-yellow-bolder, #FF9D00)"
91
90
  },
92
91
  // 800
93
92
  {
94
93
  label: 'Dark Red',
95
- value: '#D32D03FF'
94
+ value: "var(--ds-chart-red-bolder, #D32D03)"
96
95
  },
97
96
  // 800
98
97
  {
99
98
  label: 'Dark Purple',
100
- value: '#5A43D0FF'
99
+ value: "var(--ds-chart-purple-bolder, #5A43D0)"
101
100
  },
102
101
  // 800
103
102
 
104
103
  {
105
104
  label: 'Darker Blue',
106
- value: '#003884FF'
105
+ value: "var(--ds-chart-blue-boldest, #003884)"
107
106
  },
108
107
  // 1000
109
108
  {
110
109
  label: 'Darker Green',
111
- value: '#055C3FFF'
110
+ value: "var(--ds-chart-green-boldest, #055C3F)"
112
111
  },
113
112
  // 1000
114
113
  {
115
114
  label: 'Darker Yellow',
116
- value: '#946104FF'
115
+ value: "var(--ds-chart-yellow-boldest, #946104)"
117
116
  },
118
117
  // 1000
119
118
  {
120
119
  label: 'Darker Red',
121
- value: '#A32000FF'
120
+ value: "var(--ds-chart-red-boldest, #A32000)"
122
121
  },
123
122
  // 1000
124
123
  {
125
124
  label: 'Darker Purple',
126
- value: '#44368BFF'
125
+ value: "var(--ds-chart-purple-boldest, #44368B)"
127
126
  } // 1000
128
127
  ].map(function (color) {
129
128
  return _objectSpread(_objectSpread({}, color), {}, {
@@ -137,185 +136,185 @@ export var colorPalette = [{
137
136
  */
138
137
  export var extendedColorPalette = [{
139
138
  label: 'Darker Blue',
140
- value: '#003884'
139
+ value: "var(--ds-chart-blue-boldest, #003884)"
141
140
  },
142
141
  // 1000
143
142
  {
144
143
  label: 'Darker Teal',
145
- value: '#206B74'
144
+ value: "var(--ds-chart-teal-boldest, #206B74)"
146
145
  },
147
146
  // 1000
148
147
  {
149
148
  label: 'Darker Green',
150
- value: '#055C3F'
149
+ value: "var(--ds-chart-green-boldest, #055C3F)"
151
150
  },
152
151
  // 1000
153
152
  {
154
153
  label: 'Darker Yellow',
155
- value: '#946104'
154
+ value: "var(--ds-chart-yellow-boldest, #946104)"
156
155
  },
157
156
  // 1000
158
157
  {
159
158
  label: 'Darker Orange',
160
- value: '#974F0C'
159
+ value: "var(--ds-chart-orange-boldest, #974F0C)"
161
160
  },
162
161
  // 1000
163
162
  {
164
163
  label: 'Darker Red',
165
- value: '#A32000'
164
+ value: "var(--ds-chart-red-boldest, #A32000)"
166
165
  },
167
166
  // 1000
168
167
  {
169
168
  label: 'Darker Magenta',
170
- value: '#943D73'
169
+ value: "var(--ds-chart-magenta-boldest, #943D73)"
171
170
  },
172
171
  // 1000
173
172
  {
174
173
  label: 'Darker Purple',
175
- value: '#44368B'
174
+ value: "var(--ds-chart-purple-boldest, #44368B)"
176
175
  },
177
176
  // 1000
178
177
  {
179
178
  label: 'Darker Gray',
180
- value: '#44546F'
179
+ value: "var(--ds-chart-gray-boldest, #44546F)"
181
180
  },
182
181
  // 1000
183
182
 
184
183
  {
185
184
  label: 'Dark Blue',
186
- value: '#0055CC'
185
+ value: "var(--ds-chart-blue-bolder, #0055CC)"
187
186
  },
188
187
  // 800
189
188
  {
190
189
  label: 'Dark Teal',
191
- value: '#1D7F8C'
190
+ value: "var(--ds-chart-teal-bolder, #1D7F8C)"
192
191
  },
193
192
  // 800
194
193
  {
195
194
  label: 'Dark Green',
196
- value: '#177D52'
195
+ value: "var(--ds-chart-green-bolder, #177D52)"
197
196
  },
198
197
  // 800
199
198
  {
200
199
  label: 'Dark Yellow',
201
- value: '#FF9D00'
200
+ value: "var(--ds-chart-yellow-bolder, #FF9D00)"
202
201
  },
203
202
  // 800
204
203
  {
205
204
  label: 'Dark Orange',
206
- value: '#B65C02'
205
+ value: "var(--ds-chart-orange-bolder, #B65C02)"
207
206
  },
208
207
  // 800
209
208
  {
210
209
  label: 'Dark Red',
211
- value: '#D32D03'
210
+ value: "var(--ds-chart-red-bolder, #D32D03)"
212
211
  },
213
212
  // 800
214
213
  {
215
214
  label: 'Dark Magenta',
216
- value: '#CD519D'
215
+ value: "var(--ds-chart-magenta-bolder, #CD519D)"
217
216
  },
218
217
  // 800
219
218
  {
220
219
  label: 'Dark Purple',
221
- value: '#5A43D0'
220
+ value: "var(--ds-chart-purple-bolder, #5A43D0)"
222
221
  },
223
222
  // 800
224
223
  {
225
224
  label: 'Dark Gray',
226
- value: '#758195'
225
+ value: "var(--ds-chart-gray-bolder, #758195)"
227
226
  },
228
227
  // 800
229
228
 
230
229
  {
231
230
  label: 'Blue',
232
- value: '#247FFF'
231
+ value: "var(--ds-chart-blue-bold, #247FFF)"
233
232
  },
234
233
  // 600
235
234
  {
236
235
  label: 'Teal',
237
- value: '#1D9AAA'
236
+ value: "var(--ds-chart-teal-bold, #1D9AAA)"
238
237
  },
239
238
  // 600
240
239
  {
241
240
  label: 'Green',
242
- value: '#23A971'
241
+ value: "var(--ds-chart-green-bold, #23A971)"
243
242
  },
244
243
  // 600
245
244
  {
246
245
  label: 'Yellow',
247
- value: '#FFBE33'
246
+ value: "var(--ds-chart-yellow-bold, #FFBE33)"
248
247
  },
249
248
  // 600
250
249
  {
251
250
  label: 'Orange',
252
- value: '#D97008'
251
+ value: "var(--ds-chart-orange-bold, #D97008)"
253
252
  },
254
253
  // 600
255
254
  {
256
255
  label: 'Red',
257
- value: '#FC552C'
256
+ value: "var(--ds-chart-red-bold, #FC552C)"
258
257
  },
259
258
  // 600
260
259
  {
261
260
  label: 'Magenta',
262
- value: '#DA62AC'
261
+ value: "var(--ds-chart-magenta-bold, #DA62AC)"
263
262
  },
264
263
  // 600
265
264
  {
266
265
  label: 'Purple',
267
- value: '#8B77EE'
266
+ value: "var(--ds-chart-purple-bold, #8B77EE)"
268
267
  },
269
268
  // 600
270
269
  {
271
270
  label: 'Gray',
272
- value: '#8590A2'
271
+ value: "var(--ds-chart-gray-bold, #8590A2)"
273
272
  },
274
273
  // 600
275
274
 
276
275
  {
277
276
  label: 'Light Blue',
278
- value: '#7AB2FF'
277
+ value: "var(--ds-background-accent-blue-subtle, #7AB2FF)"
279
278
  },
280
279
  // 400
281
280
  {
282
281
  label: 'Light Teal',
283
- value: '#60C6D2'
282
+ value: "var(--ds-background-accent-teal-subtle, #60C6D2)"
284
283
  },
285
284
  // 400
286
285
  {
287
286
  label: 'Light Green',
288
- value: '#6BE1B0'
287
+ value: "var(--ds-background-accent-green-subtle, #6BE1B0)"
289
288
  },
290
289
  // 400
291
290
  {
292
291
  label: 'Light Yellow',
293
- value: '#FFDB57'
292
+ value: "var(--ds-background-accent-yellow-subtle, #FFDB57)"
294
293
  },
295
294
  // 400
296
295
  {
297
296
  label: 'Light Orange',
298
- value: '#FAA53D'
297
+ value: "var(--ds-background-accent-orange-subtle, #FAA53D)"
299
298
  },
300
299
  // 400
301
300
  {
302
301
  label: 'Light Red',
303
- value: '#FF8F73'
302
+ value: "var(--ds-background-accent-red-subtle, #FF8F73)"
304
303
  },
305
304
  // 400
306
305
  {
307
306
  label: 'Light Magenta',
308
- value: '#E774BB'
307
+ value: "var(--ds-background-accent-magenta-subtle, #E774BB)"
309
308
  },
310
309
  // 400
311
310
  {
312
311
  label: 'Light Purple',
313
- value: '#B5A7FB'
312
+ value: "var(--ds-background-accent-purple-subtle, #B5A7FB)"
314
313
  },
315
314
  // 400
316
315
  {
317
316
  label: 'Light Gray',
318
- value: '#8993A5'
317
+ value: "var(--ds-background-accent-gray-subtle, #8993A5)"
319
318
  } // 400
320
319
  ].map(function (color) {
321
320
  return _objectSpread(_objectSpread({}, color), {}, {
@@ -345,16 +344,10 @@ var ColorPicker = function ColorPicker(props) {
345
344
  useSomewhatSemanticTextColorNames = _ref.useSomewhatSemanticTextColorNames,
346
345
  expandedChartColors = _ref.expandedChartColors;
347
346
  return expandedChartColors ? jsx(ColorPickerButton, {
348
- title: title
349
- // Original color palette had hex code with alpha channel.
350
- // However, alpha channel was always FF, and it was not used
351
- // Expanded color palette does not have alpha channel, so
352
- // removing last two characters from hex code with alpha here.
353
- ,
354
- currentColor: currentColor.substring(0, 7),
347
+ title: title,
348
+ currentColor: currentColor,
355
349
  onChange: onColorChange,
356
350
  colorPalette: extendedColorPalette,
357
- hexToPaletteColor: hexToEditorTableChartsPaletteColor,
358
351
  paletteColorTooltipMessages: chartsColorPaletteTooltipMessages
359
352
  // We did not want to create new FF or update
360
353
  // useSomewhatSemanticTextColorNames name
package/dist/esm/version-wrapper.js CHANGED
@@ -1,5 +1,5 @@
1
1
  export var name = "@atlaskit/editor-core";
2
- export var version = "187.31.1";
2
+ export var version = "187.31.2";
3
3
  export var nextMajorVersion = function nextMajorVersion() {
4
4
  return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
5
5
  };
package/dist/types/ui/ConfigPanel/Fields/ColorPicker.d.ts CHANGED
@@ -1,9 +1,9 @@
1
1
  /** @jsx jsx */
2
2
  import { jsx } from '@emotion/react';
3
- import { ColorField } from '@atlaskit/editor-common/extensions';
4
- import { FeatureFlags } from '@atlaskit/editor-common/types';
5
- import { PaletteColor } from '../../../ui/ColorPalette/Palettes';
6
- import { OnFieldChange } from '../types';
3
+ import type { ColorField } from '@atlaskit/editor-common/extensions';
4
+ import type { FeatureFlags } from '@atlaskit/editor-common/types';
5
+ import type { PaletteColor } from '../../../ui/ColorPalette/Palettes';
6
+ import type { OnFieldChange } from '../types';
7
7
  export declare const colorPalette: PaletteColor[];
8
8
  /**
9
9
  * Extended chart colors.
package/dist/types-ts4.5/ui/ConfigPanel/Fields/ColorPicker.d.ts CHANGED
@@ -1,9 +1,9 @@
1
1
  /** @jsx jsx */
2
2
  import { jsx } from '@emotion/react';
3
- import { ColorField } from '@atlaskit/editor-common/extensions';
4
- import { FeatureFlags } from '@atlaskit/editor-common/types';
5
- import { PaletteColor } from '../../../ui/ColorPalette/Palettes';
6
- import { OnFieldChange } from '../types';
3
+ import type { ColorField } from '@atlaskit/editor-common/extensions';
4
+ import type { FeatureFlags } from '@atlaskit/editor-common/types';
5
+ import type { PaletteColor } from '../../../ui/ColorPalette/Palettes';
6
+ import type { OnFieldChange } from '../types';
7
7
  export declare const colorPalette: PaletteColor[];
8
8
  /**
9
9
  * Extended chart colors.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-core",
3
- "version": "187.31.1",
3
+ "version": "187.31.2",
4
4
  "description": "A package contains Atlassian editor core functionality",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"