@atlaskit/editor-palette 1.2.0 → 1.4.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.
- package/CHANGELOG.md +16 -0
- package/dist/cjs/index.js +6 -0
- package/dist/cjs/table-charts.js +123 -3
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/index.js +1 -1
- package/dist/es2019/table-charts.js +156 -39
- package/dist/es2019/version.json +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/table-charts.js +122 -3
- package/dist/esm/version.json +1 -1
- package/dist/types/background.d.ts +1 -1
- package/dist/types/index.d.ts +1 -1
- package/dist/types/table-charts.d.ts +148 -37
- package/package.json +3 -3
- package/report.api.md +198 -38
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @atlaskit/editor-palette
|
|
2
2
|
|
|
3
|
+
## 1.4.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
|
|
8
|
+
|
|
9
|
+
## 1.3.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- [`c2385dcb8f7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c2385dcb8f7) - [ux] ED-17043 Expanded table chart colors from 20 to 36 colors.
|
|
14
|
+
|
|
15
|
+
### Patch Changes
|
|
16
|
+
|
|
17
|
+
- [`2e01c9c74b5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2e01c9c74b5) - DUMMY remove before merging to master; dupe adf-schema via adf-utils
|
|
18
|
+
|
|
3
19
|
## 1.2.0
|
|
4
20
|
|
|
5
21
|
### Minor Changes
|
package/dist/cjs/index.js
CHANGED
|
@@ -27,6 +27,12 @@ Object.defineProperty(exports, "hexToEditorTableChartsPaletteColor", {
|
|
|
27
27
|
return _tableCharts.hexToEditorTableChartsPaletteColor;
|
|
28
28
|
}
|
|
29
29
|
});
|
|
30
|
+
Object.defineProperty(exports, "hexToEditorTableChartsPaletteColorTokenName", {
|
|
31
|
+
enumerable: true,
|
|
32
|
+
get: function get() {
|
|
33
|
+
return _tableCharts.hexToEditorTableChartsPaletteColorTokenName;
|
|
34
|
+
}
|
|
35
|
+
});
|
|
30
36
|
Object.defineProperty(exports, "hexToEditorTextPaletteColor", {
|
|
31
37
|
enumerable: true,
|
|
32
38
|
get: function get() {
|
package/dist/cjs/table-charts.js
CHANGED
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.hexToEditorTableChartsPaletteColor = hexToEditorTableChartsPaletteColor;
|
|
8
|
+
exports.hexToEditorTableChartsPaletteColorTokenName = hexToEditorTableChartsPaletteColorTokenName;
|
|
8
9
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
10
|
var _editorTableChartsPal;
|
|
10
11
|
// This import will be stripped on build
|
|
@@ -33,12 +34,19 @@ function hexToEditorTableChartsPaletteColor(hexColor) {
|
|
|
33
34
|
// Ts ignore used to allow use of conditional return type
|
|
34
35
|
// (preferencing better type on consumption over safety in implementation)
|
|
35
36
|
// @ts-ignore
|
|
36
|
-
|
|
37
|
+
var tokenData = editorTableChartsPalette[hexColor.toUpperCase()];
|
|
38
|
+
return tokenData ? tokenData.token : undefined;
|
|
39
|
+
}
|
|
40
|
+
function hexToEditorTableChartsPaletteColorTokenName(hexColor) {
|
|
41
|
+
// Ts ignore used to allow use of conditional return type
|
|
42
|
+
// (preferencing better type on consumption over safety in implementation)
|
|
43
|
+
// @ts-ignore
|
|
44
|
+
var tokenData = editorTableChartsPalette[hexColor.toUpperCase()];
|
|
45
|
+
return tokenData ? tokenData.tokenName : undefined;
|
|
37
46
|
}
|
|
38
47
|
// Colors taken from
|
|
39
48
|
// https://hello.atlassian.net/wiki/spaces/DST/pages/1790979421/DSTRFC-002+-+Shifting+Editor+s+color+palette+to+design+tokens
|
|
40
49
|
// values are asserted to improve generated type declarations
|
|
41
|
-
|
|
42
50
|
/**
|
|
43
51
|
* Tokenize hex codes into DST chart colors or
|
|
44
52
|
* into DST background.accent colors.
|
|
@@ -49,4 +57,116 @@ function hexToEditorTableChartsPaletteColor(hexColor) {
|
|
|
49
57
|
*
|
|
50
58
|
* https://product-fabric.atlassian.net/browse/ED-17042
|
|
51
59
|
*/
|
|
52
|
-
var editorTableChartsPalette = (_editorTableChartsPal = {}, (0, _defineProperty2.default)(_editorTableChartsPal, '#7AB2FF',
|
|
60
|
+
var editorTableChartsPalette = (_editorTableChartsPal = {}, (0, _defineProperty2.default)(_editorTableChartsPal, '#7AB2FF', {
|
|
61
|
+
tokenName: 'color.background.accent.blue.subtle',
|
|
62
|
+
token: "var(--ds-background-accent-blue-subtle, #7AB2FF)"
|
|
63
|
+
}), (0, _defineProperty2.default)(_editorTableChartsPal, '#60C6D2', {
|
|
64
|
+
tokenName: 'color.background.accent.teal.subtle',
|
|
65
|
+
token: "var(--ds-background-accent-teal-subtle, #60C6D2)"
|
|
66
|
+
}), (0, _defineProperty2.default)(_editorTableChartsPal, '#6BE1B0', {
|
|
67
|
+
tokenName: 'color.background.accent.green.subtle',
|
|
68
|
+
token: "var(--ds-background-accent-green-subtle, #6BE1B0)"
|
|
69
|
+
}), (0, _defineProperty2.default)(_editorTableChartsPal, '#FFDB57', {
|
|
70
|
+
tokenName: 'color.background.accent.yellow.subtle',
|
|
71
|
+
token: "var(--ds-background-accent-yellow-subtle, #FFDB57)"
|
|
72
|
+
}), (0, _defineProperty2.default)(_editorTableChartsPal, '#FAA53D', {
|
|
73
|
+
tokenName: 'color.background.accent.orange.subtle',
|
|
74
|
+
token: "var(--ds-background-accent-orange-subtle, #FAA53D)"
|
|
75
|
+
}), (0, _defineProperty2.default)(_editorTableChartsPal, '#FF8F73', {
|
|
76
|
+
tokenName: 'color.background.accent.red.subtle',
|
|
77
|
+
token: "var(--ds-background-accent-red-subtle, #FF8F73)"
|
|
78
|
+
}), (0, _defineProperty2.default)(_editorTableChartsPal, '#E774BB', {
|
|
79
|
+
tokenName: 'color.background.accent.magenta.subtle',
|
|
80
|
+
token: "var(--ds-background-accent-magenta-subtle, #E774BB)"
|
|
81
|
+
}), (0, _defineProperty2.default)(_editorTableChartsPal, '#B5A7FB', {
|
|
82
|
+
tokenName: 'color.background.accent.purple.subtle',
|
|
83
|
+
token: "var(--ds-background-accent-purple-subtle, #B5A7FB)"
|
|
84
|
+
}), (0, _defineProperty2.default)(_editorTableChartsPal, '#8993A5', {
|
|
85
|
+
tokenName: 'color.background.accent.gray.subtler',
|
|
86
|
+
token: "var(--ds-background-accent-gray-subtler, #8993A5)"
|
|
87
|
+
}), (0, _defineProperty2.default)(_editorTableChartsPal, '#247FFF', {
|
|
88
|
+
tokenName: 'color.chart.blue.bold',
|
|
89
|
+
token: "var(--ds-chart-blue-bold, #247FFF)"
|
|
90
|
+
}), (0, _defineProperty2.default)(_editorTableChartsPal, '#1D9AAA', {
|
|
91
|
+
tokenName: 'color.chart.teal.bold',
|
|
92
|
+
token: "var(--ds-chart-teal-bold, #1D9AAA)"
|
|
93
|
+
}), (0, _defineProperty2.default)(_editorTableChartsPal, '#23A971', {
|
|
94
|
+
tokenName: 'color.chart.green.bold',
|
|
95
|
+
token: "var(--ds-chart-green-bold, #23A971)"
|
|
96
|
+
}), (0, _defineProperty2.default)(_editorTableChartsPal, '#FFBE33', {
|
|
97
|
+
tokenName: 'color.chart.yellow.bold',
|
|
98
|
+
token: "var(--ds-chart-yellow-bold, #FFBE33)"
|
|
99
|
+
}), (0, _defineProperty2.default)(_editorTableChartsPal, '#D97008', {
|
|
100
|
+
tokenName: 'color.chart.orange.bold',
|
|
101
|
+
token: "var(--ds-chart-orange-bold, #D97008)"
|
|
102
|
+
}), (0, _defineProperty2.default)(_editorTableChartsPal, '#FC552C', {
|
|
103
|
+
tokenName: 'color.chart.red.bold',
|
|
104
|
+
token: "var(--ds-chart-red-bold, #FC552C)"
|
|
105
|
+
}), (0, _defineProperty2.default)(_editorTableChartsPal, '#DA62AC', {
|
|
106
|
+
tokenName: 'color.chart.magenta.bold',
|
|
107
|
+
token: "var(--ds-chart-magenta-bold, #DA62AC)"
|
|
108
|
+
}), (0, _defineProperty2.default)(_editorTableChartsPal, '#8B77EE', {
|
|
109
|
+
tokenName: 'color.chart.purple.bold',
|
|
110
|
+
token: "var(--ds-chart-purple-bold, #8B77EE)"
|
|
111
|
+
}), (0, _defineProperty2.default)(_editorTableChartsPal, '#8590A2', {
|
|
112
|
+
tokenName: 'color.chart.gray.bold',
|
|
113
|
+
token: "var(--ds-chart-gray-bold, #8590A2)"
|
|
114
|
+
}), (0, _defineProperty2.default)(_editorTableChartsPal, '#0055CC', {
|
|
115
|
+
tokenName: 'color.chart.blue.bolder',
|
|
116
|
+
token: "var(--ds-chart-blue-bolder, #0055CC)"
|
|
117
|
+
}), (0, _defineProperty2.default)(_editorTableChartsPal, '#1D7F8C', {
|
|
118
|
+
tokenName: 'color.chart.teal.bolder',
|
|
119
|
+
token: "var(--ds-chart-teal-bolder, #1D7F8C)"
|
|
120
|
+
}), (0, _defineProperty2.default)(_editorTableChartsPal, '#177D52', {
|
|
121
|
+
tokenName: 'color.chart.green.bolder',
|
|
122
|
+
token: "var(--ds-chart-green-bolder, #177D52)"
|
|
123
|
+
}), (0, _defineProperty2.default)(_editorTableChartsPal, '#FF9D00', {
|
|
124
|
+
tokenName: 'color.chart.yellow.bolder',
|
|
125
|
+
token: "var(--ds-chart-yellow-bolder, #FF9D00)"
|
|
126
|
+
}), (0, _defineProperty2.default)(_editorTableChartsPal, '#B65C02', {
|
|
127
|
+
tokenName: 'color.chart.orange.bolder',
|
|
128
|
+
token: "var(--ds-chart-orange-bolder, #B65C02)"
|
|
129
|
+
}), (0, _defineProperty2.default)(_editorTableChartsPal, '#D32D03', {
|
|
130
|
+
tokenName: 'color.chart.red.bolder',
|
|
131
|
+
token: "var(--ds-chart-red-bolder, #D32D03)"
|
|
132
|
+
}), (0, _defineProperty2.default)(_editorTableChartsPal, '#CD519D', {
|
|
133
|
+
tokenName: 'color.chart.magenta.bolder',
|
|
134
|
+
token: "var(--ds-chart-magenta-bolder, #CD519D)"
|
|
135
|
+
}), (0, _defineProperty2.default)(_editorTableChartsPal, '#5A43D0', {
|
|
136
|
+
tokenName: 'color.chart.purple.bolder',
|
|
137
|
+
token: "var(--ds-chart-purple-bolder, #5A43D0)"
|
|
138
|
+
}), (0, _defineProperty2.default)(_editorTableChartsPal, '#758195', {
|
|
139
|
+
tokenName: 'color.chart.gray.bolder',
|
|
140
|
+
token: "var(--ds-chart-gray-bolder, #758195)"
|
|
141
|
+
}), (0, _defineProperty2.default)(_editorTableChartsPal, '#003884', {
|
|
142
|
+
tokenName: 'color.chart.blue.boldest',
|
|
143
|
+
token: "var(--ds-chart-blue-boldest, #003884)"
|
|
144
|
+
}), (0, _defineProperty2.default)(_editorTableChartsPal, '#206B74', {
|
|
145
|
+
tokenName: 'color.chart.teal.boldest',
|
|
146
|
+
token: "var(--ds-chart-teal-boldest, #206B74)"
|
|
147
|
+
}), (0, _defineProperty2.default)(_editorTableChartsPal, '#055C3F', {
|
|
148
|
+
tokenName: 'color.chart.green.boldest',
|
|
149
|
+
token: "var(--ds-chart-green-boldest, #055C3F)"
|
|
150
|
+
}), (0, _defineProperty2.default)(_editorTableChartsPal, '#946104', {
|
|
151
|
+
tokenName: 'color.chart.yellow.boldest',
|
|
152
|
+
token: "var(--ds-chart-yellow-boldest, #946104)"
|
|
153
|
+
}), (0, _defineProperty2.default)(_editorTableChartsPal, '#974F0C', {
|
|
154
|
+
tokenName: 'color.chart.orange.boldest',
|
|
155
|
+
token: "var(--ds-chart-orange-boldest, #974F0C)"
|
|
156
|
+
}), (0, _defineProperty2.default)(_editorTableChartsPal, '#A32000', {
|
|
157
|
+
tokenName: 'color.chart.red.boldest',
|
|
158
|
+
token: "var(--ds-chart-red-boldest, #A32000)"
|
|
159
|
+
}), (0, _defineProperty2.default)(_editorTableChartsPal, '#943D73', {
|
|
160
|
+
tokenName: 'color.chart.magenta.boldest',
|
|
161
|
+
token: "var(--ds-chart-magenta-boldest, #943D73)"
|
|
162
|
+
}), (0, _defineProperty2.default)(_editorTableChartsPal, '#44368B', {
|
|
163
|
+
tokenName: 'color.chart.purple.boldest',
|
|
164
|
+
token: "var(--ds-chart-purple-boldest, #44368B)"
|
|
165
|
+
}), (0, _defineProperty2.default)(_editorTableChartsPal, '#44546F', {
|
|
166
|
+
tokenName: 'color.chart.gray.boldest',
|
|
167
|
+
token: "var(--ds-chart-gray-boldest, #44546F)"
|
|
168
|
+
}), _editorTableChartsPal);
|
|
169
|
+
var tableChartsPaletteKeys = Object.keys(editorTableChartsPalette);
|
|
170
|
+
var tokenNames = tableChartsPaletteKeys.map(function (hexCode) {
|
|
171
|
+
return editorTableChartsPalette[hexCode].tokenName;
|
|
172
|
+
});
|
package/dist/cjs/version.json
CHANGED
package/dist/es2019/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export { hexToEditorBackgroundPaletteColor, hexToEditorBackgroundPaletteColorTokenName } from './background';
|
|
2
2
|
export { hexToEditorBorderPaletteColor } from './border';
|
|
3
3
|
export { hexToEditorTextPaletteColor } from './text';
|
|
4
|
-
export { hexToEditorTableChartsPaletteColor } from './table-charts';
|
|
4
|
+
export { hexToEditorTableChartsPaletteColor, hexToEditorTableChartsPaletteColorTokenName } from './table-charts';
|
|
@@ -24,12 +24,19 @@ export function hexToEditorTableChartsPaletteColor(hexColor) {
|
|
|
24
24
|
// Ts ignore used to allow use of conditional return type
|
|
25
25
|
// (preferencing better type on consumption over safety in implementation)
|
|
26
26
|
// @ts-ignore
|
|
27
|
-
|
|
27
|
+
const tokenData = editorTableChartsPalette[hexColor.toUpperCase()];
|
|
28
|
+
return tokenData ? tokenData.token : undefined;
|
|
29
|
+
}
|
|
30
|
+
export function hexToEditorTableChartsPaletteColorTokenName(hexColor) {
|
|
31
|
+
// Ts ignore used to allow use of conditional return type
|
|
32
|
+
// (preferencing better type on consumption over safety in implementation)
|
|
33
|
+
// @ts-ignore
|
|
34
|
+
const tokenData = editorTableChartsPalette[hexColor.toUpperCase()];
|
|
35
|
+
return tokenData ? tokenData.tokenName : undefined;
|
|
28
36
|
}
|
|
29
37
|
// Colors taken from
|
|
30
38
|
// https://hello.atlassian.net/wiki/spaces/DST/pages/1790979421/DSTRFC-002+-+Shifting+Editor+s+color+palette+to+design+tokens
|
|
31
39
|
// values are asserted to improve generated type declarations
|
|
32
|
-
|
|
33
40
|
/**
|
|
34
41
|
* Tokenize hex codes into DST chart colors or
|
|
35
42
|
* into DST background.accent colors.
|
|
@@ -41,40 +48,150 @@ export function hexToEditorTableChartsPaletteColor(hexColor) {
|
|
|
41
48
|
* https://product-fabric.atlassian.net/browse/ED-17042
|
|
42
49
|
*/
|
|
43
50
|
const editorTableChartsPalette = {
|
|
44
|
-
['#7AB2FF']:
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
['#
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
['#
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
['#
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
['#
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
['#
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
['#
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
['#
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
['#
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
51
|
+
['#7AB2FF']: {
|
|
52
|
+
tokenName: 'color.background.accent.blue.subtle',
|
|
53
|
+
token: "var(--ds-background-accent-blue-subtle, #7AB2FF)"
|
|
54
|
+
},
|
|
55
|
+
['#60C6D2']: {
|
|
56
|
+
tokenName: 'color.background.accent.teal.subtle',
|
|
57
|
+
token: "var(--ds-background-accent-teal-subtle, #60C6D2)"
|
|
58
|
+
},
|
|
59
|
+
['#6BE1B0']: {
|
|
60
|
+
tokenName: 'color.background.accent.green.subtle',
|
|
61
|
+
token: "var(--ds-background-accent-green-subtle, #6BE1B0)"
|
|
62
|
+
},
|
|
63
|
+
['#FFDB57']: {
|
|
64
|
+
tokenName: 'color.background.accent.yellow.subtle',
|
|
65
|
+
token: "var(--ds-background-accent-yellow-subtle, #FFDB57)"
|
|
66
|
+
},
|
|
67
|
+
['#FAA53D']: {
|
|
68
|
+
tokenName: 'color.background.accent.orange.subtle',
|
|
69
|
+
token: "var(--ds-background-accent-orange-subtle, #FAA53D)"
|
|
70
|
+
},
|
|
71
|
+
['#FF8F73']: {
|
|
72
|
+
tokenName: 'color.background.accent.red.subtle',
|
|
73
|
+
token: "var(--ds-background-accent-red-subtle, #FF8F73)"
|
|
74
|
+
},
|
|
75
|
+
['#E774BB']: {
|
|
76
|
+
tokenName: 'color.background.accent.magenta.subtle',
|
|
77
|
+
token: "var(--ds-background-accent-magenta-subtle, #E774BB)"
|
|
78
|
+
},
|
|
79
|
+
['#B5A7FB']: {
|
|
80
|
+
tokenName: 'color.background.accent.purple.subtle',
|
|
81
|
+
token: "var(--ds-background-accent-purple-subtle, #B5A7FB)"
|
|
82
|
+
},
|
|
83
|
+
['#8993A5']: {
|
|
84
|
+
tokenName: 'color.background.accent.gray.subtler',
|
|
85
|
+
token: "var(--ds-background-accent-gray-subtler, #8993A5)"
|
|
86
|
+
},
|
|
87
|
+
['#247FFF']: {
|
|
88
|
+
tokenName: 'color.chart.blue.bold',
|
|
89
|
+
token: "var(--ds-chart-blue-bold, #247FFF)"
|
|
90
|
+
},
|
|
91
|
+
['#1D9AAA']: {
|
|
92
|
+
tokenName: 'color.chart.teal.bold',
|
|
93
|
+
token: "var(--ds-chart-teal-bold, #1D9AAA)"
|
|
94
|
+
},
|
|
95
|
+
['#23A971']: {
|
|
96
|
+
tokenName: 'color.chart.green.bold',
|
|
97
|
+
token: "var(--ds-chart-green-bold, #23A971)"
|
|
98
|
+
},
|
|
99
|
+
['#FFBE33']: {
|
|
100
|
+
tokenName: 'color.chart.yellow.bold',
|
|
101
|
+
token: "var(--ds-chart-yellow-bold, #FFBE33)"
|
|
102
|
+
},
|
|
103
|
+
['#D97008']: {
|
|
104
|
+
tokenName: 'color.chart.orange.bold',
|
|
105
|
+
token: "var(--ds-chart-orange-bold, #D97008)"
|
|
106
|
+
},
|
|
107
|
+
['#FC552C']: {
|
|
108
|
+
tokenName: 'color.chart.red.bold',
|
|
109
|
+
token: "var(--ds-chart-red-bold, #FC552C)"
|
|
110
|
+
},
|
|
111
|
+
['#DA62AC']: {
|
|
112
|
+
tokenName: 'color.chart.magenta.bold',
|
|
113
|
+
token: "var(--ds-chart-magenta-bold, #DA62AC)"
|
|
114
|
+
},
|
|
115
|
+
['#8B77EE']: {
|
|
116
|
+
tokenName: 'color.chart.purple.bold',
|
|
117
|
+
token: "var(--ds-chart-purple-bold, #8B77EE)"
|
|
118
|
+
},
|
|
119
|
+
['#8590A2']: {
|
|
120
|
+
tokenName: 'color.chart.gray.bold',
|
|
121
|
+
token: "var(--ds-chart-gray-bold, #8590A2)"
|
|
122
|
+
},
|
|
123
|
+
['#0055CC']: {
|
|
124
|
+
tokenName: 'color.chart.blue.bolder',
|
|
125
|
+
token: "var(--ds-chart-blue-bolder, #0055CC)"
|
|
126
|
+
},
|
|
127
|
+
['#1D7F8C']: {
|
|
128
|
+
tokenName: 'color.chart.teal.bolder',
|
|
129
|
+
token: "var(--ds-chart-teal-bolder, #1D7F8C)"
|
|
130
|
+
},
|
|
131
|
+
['#177D52']: {
|
|
132
|
+
tokenName: 'color.chart.green.bolder',
|
|
133
|
+
token: "var(--ds-chart-green-bolder, #177D52)"
|
|
134
|
+
},
|
|
135
|
+
['#FF9D00']: {
|
|
136
|
+
tokenName: 'color.chart.yellow.bolder',
|
|
137
|
+
token: "var(--ds-chart-yellow-bolder, #FF9D00)"
|
|
138
|
+
},
|
|
139
|
+
['#B65C02']: {
|
|
140
|
+
tokenName: 'color.chart.orange.bolder',
|
|
141
|
+
token: "var(--ds-chart-orange-bolder, #B65C02)"
|
|
142
|
+
},
|
|
143
|
+
['#D32D03']: {
|
|
144
|
+
tokenName: 'color.chart.red.bolder',
|
|
145
|
+
token: "var(--ds-chart-red-bolder, #D32D03)"
|
|
146
|
+
},
|
|
147
|
+
['#CD519D']: {
|
|
148
|
+
tokenName: 'color.chart.magenta.bolder',
|
|
149
|
+
token: "var(--ds-chart-magenta-bolder, #CD519D)"
|
|
150
|
+
},
|
|
151
|
+
['#5A43D0']: {
|
|
152
|
+
tokenName: 'color.chart.purple.bolder',
|
|
153
|
+
token: "var(--ds-chart-purple-bolder, #5A43D0)"
|
|
154
|
+
},
|
|
155
|
+
['#758195']: {
|
|
156
|
+
tokenName: 'color.chart.gray.bolder',
|
|
157
|
+
token: "var(--ds-chart-gray-bolder, #758195)"
|
|
158
|
+
},
|
|
159
|
+
['#003884']: {
|
|
160
|
+
tokenName: 'color.chart.blue.boldest',
|
|
161
|
+
token: "var(--ds-chart-blue-boldest, #003884)"
|
|
162
|
+
},
|
|
163
|
+
['#206B74']: {
|
|
164
|
+
tokenName: 'color.chart.teal.boldest',
|
|
165
|
+
token: "var(--ds-chart-teal-boldest, #206B74)"
|
|
166
|
+
},
|
|
167
|
+
['#055C3F']: {
|
|
168
|
+
tokenName: 'color.chart.green.boldest',
|
|
169
|
+
token: "var(--ds-chart-green-boldest, #055C3F)"
|
|
170
|
+
},
|
|
171
|
+
['#946104']: {
|
|
172
|
+
tokenName: 'color.chart.yellow.boldest',
|
|
173
|
+
token: "var(--ds-chart-yellow-boldest, #946104)"
|
|
174
|
+
},
|
|
175
|
+
['#974F0C']: {
|
|
176
|
+
tokenName: 'color.chart.orange.boldest',
|
|
177
|
+
token: "var(--ds-chart-orange-boldest, #974F0C)"
|
|
178
|
+
},
|
|
179
|
+
['#A32000']: {
|
|
180
|
+
tokenName: 'color.chart.red.boldest',
|
|
181
|
+
token: "var(--ds-chart-red-boldest, #A32000)"
|
|
182
|
+
},
|
|
183
|
+
['#943D73']: {
|
|
184
|
+
tokenName: 'color.chart.magenta.boldest',
|
|
185
|
+
token: "var(--ds-chart-magenta-boldest, #943D73)"
|
|
186
|
+
},
|
|
187
|
+
['#44368B']: {
|
|
188
|
+
tokenName: 'color.chart.purple.boldest',
|
|
189
|
+
token: "var(--ds-chart-purple-boldest, #44368B)"
|
|
190
|
+
},
|
|
191
|
+
['#44546F']: {
|
|
192
|
+
tokenName: 'color.chart.gray.boldest',
|
|
193
|
+
token: "var(--ds-chart-gray-boldest, #44546F)"
|
|
194
|
+
}
|
|
195
|
+
};
|
|
196
|
+
const tableChartsPaletteKeys = Object.keys(editorTableChartsPalette);
|
|
197
|
+
const tokenNames = tableChartsPaletteKeys.map(hexCode => editorTableChartsPalette[hexCode].tokenName);
|
package/dist/es2019/version.json
CHANGED
package/dist/esm/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export { hexToEditorBackgroundPaletteColor, hexToEditorBackgroundPaletteColorTokenName } from './background';
|
|
2
2
|
export { hexToEditorBorderPaletteColor } from './border';
|
|
3
3
|
export { hexToEditorTextPaletteColor } from './text';
|
|
4
|
-
export { hexToEditorTableChartsPaletteColor } from './table-charts';
|
|
4
|
+
export { hexToEditorTableChartsPaletteColor, hexToEditorTableChartsPaletteColorTokenName } from './table-charts';
|
package/dist/esm/table-charts.js
CHANGED
|
@@ -26,12 +26,19 @@ export function hexToEditorTableChartsPaletteColor(hexColor) {
|
|
|
26
26
|
// Ts ignore used to allow use of conditional return type
|
|
27
27
|
// (preferencing better type on consumption over safety in implementation)
|
|
28
28
|
// @ts-ignore
|
|
29
|
-
|
|
29
|
+
var tokenData = editorTableChartsPalette[hexColor.toUpperCase()];
|
|
30
|
+
return tokenData ? tokenData.token : undefined;
|
|
31
|
+
}
|
|
32
|
+
export function hexToEditorTableChartsPaletteColorTokenName(hexColor) {
|
|
33
|
+
// Ts ignore used to allow use of conditional return type
|
|
34
|
+
// (preferencing better type on consumption over safety in implementation)
|
|
35
|
+
// @ts-ignore
|
|
36
|
+
var tokenData = editorTableChartsPalette[hexColor.toUpperCase()];
|
|
37
|
+
return tokenData ? tokenData.tokenName : undefined;
|
|
30
38
|
}
|
|
31
39
|
// Colors taken from
|
|
32
40
|
// https://hello.atlassian.net/wiki/spaces/DST/pages/1790979421/DSTRFC-002+-+Shifting+Editor+s+color+palette+to+design+tokens
|
|
33
41
|
// values are asserted to improve generated type declarations
|
|
34
|
-
|
|
35
42
|
/**
|
|
36
43
|
* Tokenize hex codes into DST chart colors or
|
|
37
44
|
* into DST background.accent colors.
|
|
@@ -42,4 +49,116 @@ export function hexToEditorTableChartsPaletteColor(hexColor) {
|
|
|
42
49
|
*
|
|
43
50
|
* https://product-fabric.atlassian.net/browse/ED-17042
|
|
44
51
|
*/
|
|
45
|
-
var editorTableChartsPalette = (_editorTableChartsPal = {}, _defineProperty(_editorTableChartsPal, '#7AB2FF',
|
|
52
|
+
var editorTableChartsPalette = (_editorTableChartsPal = {}, _defineProperty(_editorTableChartsPal, '#7AB2FF', {
|
|
53
|
+
tokenName: 'color.background.accent.blue.subtle',
|
|
54
|
+
token: "var(--ds-background-accent-blue-subtle, #7AB2FF)"
|
|
55
|
+
}), _defineProperty(_editorTableChartsPal, '#60C6D2', {
|
|
56
|
+
tokenName: 'color.background.accent.teal.subtle',
|
|
57
|
+
token: "var(--ds-background-accent-teal-subtle, #60C6D2)"
|
|
58
|
+
}), _defineProperty(_editorTableChartsPal, '#6BE1B0', {
|
|
59
|
+
tokenName: 'color.background.accent.green.subtle',
|
|
60
|
+
token: "var(--ds-background-accent-green-subtle, #6BE1B0)"
|
|
61
|
+
}), _defineProperty(_editorTableChartsPal, '#FFDB57', {
|
|
62
|
+
tokenName: 'color.background.accent.yellow.subtle',
|
|
63
|
+
token: "var(--ds-background-accent-yellow-subtle, #FFDB57)"
|
|
64
|
+
}), _defineProperty(_editorTableChartsPal, '#FAA53D', {
|
|
65
|
+
tokenName: 'color.background.accent.orange.subtle',
|
|
66
|
+
token: "var(--ds-background-accent-orange-subtle, #FAA53D)"
|
|
67
|
+
}), _defineProperty(_editorTableChartsPal, '#FF8F73', {
|
|
68
|
+
tokenName: 'color.background.accent.red.subtle',
|
|
69
|
+
token: "var(--ds-background-accent-red-subtle, #FF8F73)"
|
|
70
|
+
}), _defineProperty(_editorTableChartsPal, '#E774BB', {
|
|
71
|
+
tokenName: 'color.background.accent.magenta.subtle',
|
|
72
|
+
token: "var(--ds-background-accent-magenta-subtle, #E774BB)"
|
|
73
|
+
}), _defineProperty(_editorTableChartsPal, '#B5A7FB', {
|
|
74
|
+
tokenName: 'color.background.accent.purple.subtle',
|
|
75
|
+
token: "var(--ds-background-accent-purple-subtle, #B5A7FB)"
|
|
76
|
+
}), _defineProperty(_editorTableChartsPal, '#8993A5', {
|
|
77
|
+
tokenName: 'color.background.accent.gray.subtler',
|
|
78
|
+
token: "var(--ds-background-accent-gray-subtler, #8993A5)"
|
|
79
|
+
}), _defineProperty(_editorTableChartsPal, '#247FFF', {
|
|
80
|
+
tokenName: 'color.chart.blue.bold',
|
|
81
|
+
token: "var(--ds-chart-blue-bold, #247FFF)"
|
|
82
|
+
}), _defineProperty(_editorTableChartsPal, '#1D9AAA', {
|
|
83
|
+
tokenName: 'color.chart.teal.bold',
|
|
84
|
+
token: "var(--ds-chart-teal-bold, #1D9AAA)"
|
|
85
|
+
}), _defineProperty(_editorTableChartsPal, '#23A971', {
|
|
86
|
+
tokenName: 'color.chart.green.bold',
|
|
87
|
+
token: "var(--ds-chart-green-bold, #23A971)"
|
|
88
|
+
}), _defineProperty(_editorTableChartsPal, '#FFBE33', {
|
|
89
|
+
tokenName: 'color.chart.yellow.bold',
|
|
90
|
+
token: "var(--ds-chart-yellow-bold, #FFBE33)"
|
|
91
|
+
}), _defineProperty(_editorTableChartsPal, '#D97008', {
|
|
92
|
+
tokenName: 'color.chart.orange.bold',
|
|
93
|
+
token: "var(--ds-chart-orange-bold, #D97008)"
|
|
94
|
+
}), _defineProperty(_editorTableChartsPal, '#FC552C', {
|
|
95
|
+
tokenName: 'color.chart.red.bold',
|
|
96
|
+
token: "var(--ds-chart-red-bold, #FC552C)"
|
|
97
|
+
}), _defineProperty(_editorTableChartsPal, '#DA62AC', {
|
|
98
|
+
tokenName: 'color.chart.magenta.bold',
|
|
99
|
+
token: "var(--ds-chart-magenta-bold, #DA62AC)"
|
|
100
|
+
}), _defineProperty(_editorTableChartsPal, '#8B77EE', {
|
|
101
|
+
tokenName: 'color.chart.purple.bold',
|
|
102
|
+
token: "var(--ds-chart-purple-bold, #8B77EE)"
|
|
103
|
+
}), _defineProperty(_editorTableChartsPal, '#8590A2', {
|
|
104
|
+
tokenName: 'color.chart.gray.bold',
|
|
105
|
+
token: "var(--ds-chart-gray-bold, #8590A2)"
|
|
106
|
+
}), _defineProperty(_editorTableChartsPal, '#0055CC', {
|
|
107
|
+
tokenName: 'color.chart.blue.bolder',
|
|
108
|
+
token: "var(--ds-chart-blue-bolder, #0055CC)"
|
|
109
|
+
}), _defineProperty(_editorTableChartsPal, '#1D7F8C', {
|
|
110
|
+
tokenName: 'color.chart.teal.bolder',
|
|
111
|
+
token: "var(--ds-chart-teal-bolder, #1D7F8C)"
|
|
112
|
+
}), _defineProperty(_editorTableChartsPal, '#177D52', {
|
|
113
|
+
tokenName: 'color.chart.green.bolder',
|
|
114
|
+
token: "var(--ds-chart-green-bolder, #177D52)"
|
|
115
|
+
}), _defineProperty(_editorTableChartsPal, '#FF9D00', {
|
|
116
|
+
tokenName: 'color.chart.yellow.bolder',
|
|
117
|
+
token: "var(--ds-chart-yellow-bolder, #FF9D00)"
|
|
118
|
+
}), _defineProperty(_editorTableChartsPal, '#B65C02', {
|
|
119
|
+
tokenName: 'color.chart.orange.bolder',
|
|
120
|
+
token: "var(--ds-chart-orange-bolder, #B65C02)"
|
|
121
|
+
}), _defineProperty(_editorTableChartsPal, '#D32D03', {
|
|
122
|
+
tokenName: 'color.chart.red.bolder',
|
|
123
|
+
token: "var(--ds-chart-red-bolder, #D32D03)"
|
|
124
|
+
}), _defineProperty(_editorTableChartsPal, '#CD519D', {
|
|
125
|
+
tokenName: 'color.chart.magenta.bolder',
|
|
126
|
+
token: "var(--ds-chart-magenta-bolder, #CD519D)"
|
|
127
|
+
}), _defineProperty(_editorTableChartsPal, '#5A43D0', {
|
|
128
|
+
tokenName: 'color.chart.purple.bolder',
|
|
129
|
+
token: "var(--ds-chart-purple-bolder, #5A43D0)"
|
|
130
|
+
}), _defineProperty(_editorTableChartsPal, '#758195', {
|
|
131
|
+
tokenName: 'color.chart.gray.bolder',
|
|
132
|
+
token: "var(--ds-chart-gray-bolder, #758195)"
|
|
133
|
+
}), _defineProperty(_editorTableChartsPal, '#003884', {
|
|
134
|
+
tokenName: 'color.chart.blue.boldest',
|
|
135
|
+
token: "var(--ds-chart-blue-boldest, #003884)"
|
|
136
|
+
}), _defineProperty(_editorTableChartsPal, '#206B74', {
|
|
137
|
+
tokenName: 'color.chart.teal.boldest',
|
|
138
|
+
token: "var(--ds-chart-teal-boldest, #206B74)"
|
|
139
|
+
}), _defineProperty(_editorTableChartsPal, '#055C3F', {
|
|
140
|
+
tokenName: 'color.chart.green.boldest',
|
|
141
|
+
token: "var(--ds-chart-green-boldest, #055C3F)"
|
|
142
|
+
}), _defineProperty(_editorTableChartsPal, '#946104', {
|
|
143
|
+
tokenName: 'color.chart.yellow.boldest',
|
|
144
|
+
token: "var(--ds-chart-yellow-boldest, #946104)"
|
|
145
|
+
}), _defineProperty(_editorTableChartsPal, '#974F0C', {
|
|
146
|
+
tokenName: 'color.chart.orange.boldest',
|
|
147
|
+
token: "var(--ds-chart-orange-boldest, #974F0C)"
|
|
148
|
+
}), _defineProperty(_editorTableChartsPal, '#A32000', {
|
|
149
|
+
tokenName: 'color.chart.red.boldest',
|
|
150
|
+
token: "var(--ds-chart-red-boldest, #A32000)"
|
|
151
|
+
}), _defineProperty(_editorTableChartsPal, '#943D73', {
|
|
152
|
+
tokenName: 'color.chart.magenta.boldest',
|
|
153
|
+
token: "var(--ds-chart-magenta-boldest, #943D73)"
|
|
154
|
+
}), _defineProperty(_editorTableChartsPal, '#44368B', {
|
|
155
|
+
tokenName: 'color.chart.purple.boldest',
|
|
156
|
+
token: "var(--ds-chart-purple-boldest, #44368B)"
|
|
157
|
+
}), _defineProperty(_editorTableChartsPal, '#44546F', {
|
|
158
|
+
tokenName: 'color.chart.gray.boldest',
|
|
159
|
+
token: "var(--ds-chart-gray-boldest, #44546F)"
|
|
160
|
+
}), _editorTableChartsPal);
|
|
161
|
+
var tableChartsPaletteKeys = Object.keys(editorTableChartsPalette);
|
|
162
|
+
var tokenNames = tableChartsPaletteKeys.map(function (hexCode) {
|
|
163
|
+
return editorTableChartsPalette[hexCode].tokenName;
|
|
164
|
+
});
|
package/dist/esm/version.json
CHANGED
|
@@ -129,5 +129,5 @@ export declare const editorBackgroundPalette: {
|
|
|
129
129
|
};
|
|
130
130
|
};
|
|
131
131
|
declare const tokenNames: ("color.background.accent.blue.subtlest" | "color.background.accent.blue.subtler" | "color.background.accent.blue.subtle" | "color.background.accent.teal.subtlest" | "color.background.accent.teal.subtler" | "color.background.accent.teal.subtle" | "color.background.accent.green.subtlest" | "color.background.accent.green.subtler" | "color.background.accent.green.subtle" | "color.background.accent.yellow.subtlest" | "color.background.accent.yellow.subtler" | "color.background.accent.orange.subtle" | "color.background.accent.red.subtlest" | "color.background.accent.red.subtler" | "color.background.accent.red.subtle" | "color.background.accent.purple.subtlest" | "color.background.accent.purple.subtler" | "color.background.accent.purple.subtle" | "elevation.surface" | "color.background.accent.gray.subtlest" | "color.background.accent.gray.subtle")[];
|
|
132
|
-
export declare type EditorBackgroundPaletteTokenNames = typeof tokenNames[number];
|
|
132
|
+
export declare type EditorBackgroundPaletteTokenNames = (typeof tokenNames)[number];
|
|
133
133
|
export {};
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export { hexToEditorBackgroundPaletteColor, hexToEditorBackgroundPaletteColorTokenName, } from './background';
|
|
2
2
|
export { hexToEditorBorderPaletteColor } from './border';
|
|
3
3
|
export { hexToEditorTextPaletteColor } from './text';
|
|
4
|
-
export { hexToEditorTableChartsPaletteColor } from './table-charts';
|
|
4
|
+
export { hexToEditorTableChartsPaletteColor, hexToEditorTableChartsPaletteColorTokenName, } from './table-charts';
|
|
@@ -17,7 +17,8 @@
|
|
|
17
17
|
* - **DO NOT**: store the output of these functions in any user-generated content or back-end.
|
|
18
18
|
* - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color
|
|
19
19
|
*/
|
|
20
|
-
export declare function hexToEditorTableChartsPaletteColor<HexColor extends string>(hexColor: HexColor): HexColor extends EditorTableChartsPaletteKey ? EditorTableChartsPalette[HexColor] : string | undefined;
|
|
20
|
+
export declare function hexToEditorTableChartsPaletteColor<HexColor extends string>(hexColor: HexColor): HexColor extends EditorTableChartsPaletteKey ? EditorTableChartsPalette[HexColor]['token'] : string | undefined;
|
|
21
|
+
export declare function hexToEditorTableChartsPaletteColorTokenName<HexColor extends string>(hexColor: HexColor): HexColor extends EditorTableChartsPaletteKey ? EditorTableChartsPalette[HexColor]['tokenName'] : EditorBackgroundPaletteTokenNames | undefined;
|
|
21
22
|
declare type EditorTableChartsPalette = typeof editorTableChartsPalette;
|
|
22
23
|
export declare type EditorTableChartsPaletteKey = keyof EditorTableChartsPalette;
|
|
23
24
|
/**
|
|
@@ -31,41 +32,151 @@ export declare type EditorTableChartsPaletteKey = keyof EditorTableChartsPalette
|
|
|
31
32
|
* https://product-fabric.atlassian.net/browse/ED-17042
|
|
32
33
|
*/
|
|
33
34
|
declare const editorTableChartsPalette: {
|
|
34
|
-
"#7AB2FF":
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
"#
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
"#
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
"#
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
"#
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
"#
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
"#
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
"#
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
"#
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
35
|
+
"#7AB2FF": {
|
|
36
|
+
tokenName: "color.background.accent.blue.subtle";
|
|
37
|
+
token: "var(--ds-background-accent-blue-subtle, #7AB2FF)";
|
|
38
|
+
};
|
|
39
|
+
"#60C6D2": {
|
|
40
|
+
tokenName: "color.background.accent.teal.subtle";
|
|
41
|
+
token: "var(--ds-background-accent-teal-subtle, #60C6D2)";
|
|
42
|
+
};
|
|
43
|
+
"#6BE1B0": {
|
|
44
|
+
tokenName: "color.background.accent.green.subtle";
|
|
45
|
+
token: "var(--ds-background-accent-green-subtle, #6BE1B0)";
|
|
46
|
+
};
|
|
47
|
+
"#FFDB57": {
|
|
48
|
+
tokenName: "color.background.accent.yellow.subtle";
|
|
49
|
+
token: "var(--ds-background-accent-yellow-subtle, #FFDB57)";
|
|
50
|
+
};
|
|
51
|
+
"#FAA53D": {
|
|
52
|
+
tokenName: "color.background.accent.orange.subtle";
|
|
53
|
+
token: "var(--ds-background-accent-orange-subtle, #FAA53D)";
|
|
54
|
+
};
|
|
55
|
+
"#FF8F73": {
|
|
56
|
+
tokenName: "color.background.accent.red.subtle";
|
|
57
|
+
token: "var(--ds-background-accent-red-subtle, #FF8F73)";
|
|
58
|
+
};
|
|
59
|
+
"#E774BB": {
|
|
60
|
+
tokenName: "color.background.accent.magenta.subtle";
|
|
61
|
+
token: "var(--ds-background-accent-magenta-subtle, #E774BB)";
|
|
62
|
+
};
|
|
63
|
+
"#B5A7FB": {
|
|
64
|
+
tokenName: "color.background.accent.purple.subtle";
|
|
65
|
+
token: "var(--ds-background-accent-purple-subtle, #B5A7FB)";
|
|
66
|
+
};
|
|
67
|
+
"#8993A5": {
|
|
68
|
+
tokenName: "color.background.accent.gray.subtler";
|
|
69
|
+
token: "var(--ds-background-accent-gray-subtler, #8993A5)";
|
|
70
|
+
};
|
|
71
|
+
"#247FFF": {
|
|
72
|
+
tokenName: "color.chart.blue.bold";
|
|
73
|
+
token: "var(--ds-chart-blue-bold, #247FFF)";
|
|
74
|
+
};
|
|
75
|
+
"#1D9AAA": {
|
|
76
|
+
tokenName: "color.chart.teal.bold";
|
|
77
|
+
token: "var(--ds-chart-teal-bold, #1D9AAA)";
|
|
78
|
+
};
|
|
79
|
+
"#23A971": {
|
|
80
|
+
tokenName: "color.chart.green.bold";
|
|
81
|
+
token: "var(--ds-chart-green-bold, #23A971)";
|
|
82
|
+
};
|
|
83
|
+
"#FFBE33": {
|
|
84
|
+
tokenName: "color.chart.yellow.bold";
|
|
85
|
+
token: "var(--ds-chart-yellow-bold, #FFBE33)";
|
|
86
|
+
};
|
|
87
|
+
"#D97008": {
|
|
88
|
+
tokenName: "color.chart.orange.bold";
|
|
89
|
+
token: "var(--ds-chart-orange-bold, #D97008)";
|
|
90
|
+
};
|
|
91
|
+
"#FC552C": {
|
|
92
|
+
tokenName: "color.chart.red.bold";
|
|
93
|
+
token: "var(--ds-chart-red-bold, #FC552C)";
|
|
94
|
+
};
|
|
95
|
+
"#DA62AC": {
|
|
96
|
+
tokenName: "color.chart.magenta.bold";
|
|
97
|
+
token: "var(--ds-chart-magenta-bold, #DA62AC)";
|
|
98
|
+
};
|
|
99
|
+
"#8B77EE": {
|
|
100
|
+
tokenName: "color.chart.purple.bold";
|
|
101
|
+
token: "var(--ds-chart-purple-bold, #8B77EE)";
|
|
102
|
+
};
|
|
103
|
+
"#8590A2": {
|
|
104
|
+
tokenName: "color.chart.gray.bold";
|
|
105
|
+
token: "var(--ds-chart-gray-bold, #8590A2)";
|
|
106
|
+
};
|
|
107
|
+
"#0055CC": {
|
|
108
|
+
tokenName: "color.chart.blue.bolder";
|
|
109
|
+
token: "var(--ds-chart-blue-bolder, #0055CC)";
|
|
110
|
+
};
|
|
111
|
+
"#1D7F8C": {
|
|
112
|
+
tokenName: "color.chart.teal.bolder";
|
|
113
|
+
token: "var(--ds-chart-teal-bolder, #1D7F8C)";
|
|
114
|
+
};
|
|
115
|
+
"#177D52": {
|
|
116
|
+
tokenName: "color.chart.green.bolder";
|
|
117
|
+
token: "var(--ds-chart-green-bolder, #177D52)";
|
|
118
|
+
};
|
|
119
|
+
"#FF9D00": {
|
|
120
|
+
tokenName: "color.chart.yellow.bolder";
|
|
121
|
+
token: "var(--ds-chart-yellow-bolder, #FF9D00)";
|
|
122
|
+
};
|
|
123
|
+
"#B65C02": {
|
|
124
|
+
tokenName: "color.chart.orange.bolder";
|
|
125
|
+
token: "var(--ds-chart-orange-bolder, #B65C02)";
|
|
126
|
+
};
|
|
127
|
+
"#D32D03": {
|
|
128
|
+
tokenName: "color.chart.red.bolder";
|
|
129
|
+
token: "var(--ds-chart-red-bolder, #D32D03)";
|
|
130
|
+
};
|
|
131
|
+
"#CD519D": {
|
|
132
|
+
tokenName: "color.chart.magenta.bolder";
|
|
133
|
+
token: "var(--ds-chart-magenta-bolder, #CD519D)";
|
|
134
|
+
};
|
|
135
|
+
"#5A43D0": {
|
|
136
|
+
tokenName: "color.chart.purple.bolder";
|
|
137
|
+
token: "var(--ds-chart-purple-bolder, #5A43D0)";
|
|
138
|
+
};
|
|
139
|
+
"#758195": {
|
|
140
|
+
tokenName: "color.chart.gray.bolder";
|
|
141
|
+
token: "var(--ds-chart-gray-bolder, #758195)";
|
|
142
|
+
};
|
|
143
|
+
"#003884": {
|
|
144
|
+
tokenName: "color.chart.blue.boldest";
|
|
145
|
+
token: "var(--ds-chart-blue-boldest, #003884)";
|
|
146
|
+
};
|
|
147
|
+
"#206B74": {
|
|
148
|
+
tokenName: "color.chart.teal.boldest";
|
|
149
|
+
token: "var(--ds-chart-teal-boldest, #206B74)";
|
|
150
|
+
};
|
|
151
|
+
"#055C3F": {
|
|
152
|
+
tokenName: "color.chart.green.boldest";
|
|
153
|
+
token: "var(--ds-chart-green-boldest, #055C3F)";
|
|
154
|
+
};
|
|
155
|
+
"#946104": {
|
|
156
|
+
tokenName: "color.chart.yellow.boldest";
|
|
157
|
+
token: "var(--ds-chart-yellow-boldest, #946104)";
|
|
158
|
+
};
|
|
159
|
+
"#974F0C": {
|
|
160
|
+
tokenName: "color.chart.orange.boldest";
|
|
161
|
+
token: "var(--ds-chart-orange-boldest, #974F0C)";
|
|
162
|
+
};
|
|
163
|
+
"#A32000": {
|
|
164
|
+
tokenName: "color.chart.red.boldest";
|
|
165
|
+
token: "var(--ds-chart-red-boldest, #A32000)";
|
|
166
|
+
};
|
|
167
|
+
"#943D73": {
|
|
168
|
+
tokenName: "color.chart.magenta.boldest";
|
|
169
|
+
token: "var(--ds-chart-magenta-boldest, #943D73)";
|
|
170
|
+
};
|
|
171
|
+
"#44368B": {
|
|
172
|
+
tokenName: "color.chart.purple.boldest";
|
|
173
|
+
token: "var(--ds-chart-purple-boldest, #44368B)";
|
|
174
|
+
};
|
|
175
|
+
"#44546F": {
|
|
176
|
+
tokenName: "color.chart.gray.boldest";
|
|
177
|
+
token: "var(--ds-chart-gray-boldest, #44546F)";
|
|
178
|
+
};
|
|
70
179
|
};
|
|
180
|
+
declare const tokenNames: ("color.background.accent.blue.subtle" | "color.background.accent.teal.subtle" | "color.background.accent.green.subtle" | "color.background.accent.orange.subtle" | "color.background.accent.red.subtle" | "color.background.accent.purple.subtle" | "color.background.accent.yellow.subtle" | "color.background.accent.magenta.subtle" | "color.background.accent.gray.subtler" | "color.chart.blue.bold" | "color.chart.teal.bold" | "color.chart.green.bold" | "color.chart.yellow.bold" | "color.chart.orange.bold" | "color.chart.red.bold" | "color.chart.magenta.bold" | "color.chart.purple.bold" | "color.chart.gray.bold" | "color.chart.blue.bolder" | "color.chart.teal.bolder" | "color.chart.green.bolder" | "color.chart.yellow.bolder" | "color.chart.orange.bolder" | "color.chart.red.bolder" | "color.chart.magenta.bolder" | "color.chart.purple.bolder" | "color.chart.gray.bolder" | "color.chart.blue.boldest" | "color.chart.teal.boldest" | "color.chart.green.boldest" | "color.chart.yellow.boldest" | "color.chart.orange.boldest" | "color.chart.red.boldest" | "color.chart.magenta.boldest" | "color.chart.purple.boldest" | "color.chart.gray.boldest")[];
|
|
181
|
+
export declare type EditorBackgroundPaletteTokenNames = (typeof tokenNames)[number];
|
|
71
182
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-palette",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.0",
|
|
4
4
|
"description": "The editor palette",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -29,9 +29,9 @@
|
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"@atlaskit/docs": "*",
|
|
32
|
-
"@atlaskit/section-message": "^6.
|
|
32
|
+
"@atlaskit/section-message": "^6.4.0",
|
|
33
33
|
"@atlaskit/ssr": "*",
|
|
34
|
-
"@atlaskit/tokens": "^1.
|
|
34
|
+
"@atlaskit/tokens": "^1.3.0",
|
|
35
35
|
"@atlaskit/visual-regression": "*",
|
|
36
36
|
"@atlaskit/webdriver-runner": "*",
|
|
37
37
|
"@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
|
package/report.api.md
CHANGED
|
@@ -110,7 +110,10 @@ const editorBackgroundPalette: {
|
|
|
110
110
|
type EditorBackgroundPaletteKey = keyof EditorBackgroundPalette;
|
|
111
111
|
|
|
112
112
|
// @public (undocumented)
|
|
113
|
-
type EditorBackgroundPaletteTokenNames = typeof tokenNames[number];
|
|
113
|
+
type EditorBackgroundPaletteTokenNames = (typeof tokenNames)[number];
|
|
114
|
+
|
|
115
|
+
// @public (undocumented)
|
|
116
|
+
type EditorBackgroundPaletteTokenNames_2 = (typeof tokenNames_2)[number];
|
|
114
117
|
|
|
115
118
|
// @public (undocumented)
|
|
116
119
|
type EditorBorderPalette = typeof editorBorderPalette;
|
|
@@ -130,42 +133,150 @@ type EditorTableChartsPalette = typeof editorTableChartsPalette;
|
|
|
130
133
|
|
|
131
134
|
// @public
|
|
132
135
|
const editorTableChartsPalette: {
|
|
133
|
-
'#7AB2FF':
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
'#
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
'#
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
'#
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
'#
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
'#
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
'#
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
'#
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
'#
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
136
|
+
'#7AB2FF': {
|
|
137
|
+
tokenName: 'color.background.accent.blue.subtle';
|
|
138
|
+
token: 'var(--ds-background-accent-blue-subtle, #7AB2FF)';
|
|
139
|
+
};
|
|
140
|
+
'#60C6D2': {
|
|
141
|
+
tokenName: 'color.background.accent.teal.subtle';
|
|
142
|
+
token: 'var(--ds-background-accent-teal-subtle, #60C6D2)';
|
|
143
|
+
};
|
|
144
|
+
'#6BE1B0': {
|
|
145
|
+
tokenName: 'color.background.accent.green.subtle';
|
|
146
|
+
token: 'var(--ds-background-accent-green-subtle, #6BE1B0)';
|
|
147
|
+
};
|
|
148
|
+
'#FFDB57': {
|
|
149
|
+
tokenName: 'color.background.accent.yellow.subtle';
|
|
150
|
+
token: 'var(--ds-background-accent-yellow-subtle, #FFDB57)';
|
|
151
|
+
};
|
|
152
|
+
'#FAA53D': {
|
|
153
|
+
tokenName: 'color.background.accent.orange.subtle';
|
|
154
|
+
token: 'var(--ds-background-accent-orange-subtle, #FAA53D)';
|
|
155
|
+
};
|
|
156
|
+
'#FF8F73': {
|
|
157
|
+
tokenName: 'color.background.accent.red.subtle';
|
|
158
|
+
token: 'var(--ds-background-accent-red-subtle, #FF8F73)';
|
|
159
|
+
};
|
|
160
|
+
'#E774BB': {
|
|
161
|
+
tokenName: 'color.background.accent.magenta.subtle';
|
|
162
|
+
token: 'var(--ds-background-accent-magenta-subtle, #E774BB)';
|
|
163
|
+
};
|
|
164
|
+
'#B5A7FB': {
|
|
165
|
+
tokenName: 'color.background.accent.purple.subtle';
|
|
166
|
+
token: 'var(--ds-background-accent-purple-subtle, #B5A7FB)';
|
|
167
|
+
};
|
|
168
|
+
'#8993A5': {
|
|
169
|
+
tokenName: 'color.background.accent.gray.subtler';
|
|
170
|
+
token: 'var(--ds-background-accent-gray-subtler, #8993A5)';
|
|
171
|
+
};
|
|
172
|
+
'#247FFF': {
|
|
173
|
+
tokenName: 'color.chart.blue.bold';
|
|
174
|
+
token: 'var(--ds-chart-blue-bold, #247FFF)';
|
|
175
|
+
};
|
|
176
|
+
'#1D9AAA': {
|
|
177
|
+
tokenName: 'color.chart.teal.bold';
|
|
178
|
+
token: 'var(--ds-chart-teal-bold, #1D9AAA)';
|
|
179
|
+
};
|
|
180
|
+
'#23A971': {
|
|
181
|
+
tokenName: 'color.chart.green.bold';
|
|
182
|
+
token: 'var(--ds-chart-green-bold, #23A971)';
|
|
183
|
+
};
|
|
184
|
+
'#FFBE33': {
|
|
185
|
+
tokenName: 'color.chart.yellow.bold';
|
|
186
|
+
token: 'var(--ds-chart-yellow-bold, #FFBE33)';
|
|
187
|
+
};
|
|
188
|
+
'#D97008': {
|
|
189
|
+
tokenName: 'color.chart.orange.bold';
|
|
190
|
+
token: 'var(--ds-chart-orange-bold, #D97008)';
|
|
191
|
+
};
|
|
192
|
+
'#FC552C': {
|
|
193
|
+
tokenName: 'color.chart.red.bold';
|
|
194
|
+
token: 'var(--ds-chart-red-bold, #FC552C)';
|
|
195
|
+
};
|
|
196
|
+
'#DA62AC': {
|
|
197
|
+
tokenName: 'color.chart.magenta.bold';
|
|
198
|
+
token: 'var(--ds-chart-magenta-bold, #DA62AC)';
|
|
199
|
+
};
|
|
200
|
+
'#8B77EE': {
|
|
201
|
+
tokenName: 'color.chart.purple.bold';
|
|
202
|
+
token: 'var(--ds-chart-purple-bold, #8B77EE)';
|
|
203
|
+
};
|
|
204
|
+
'#8590A2': {
|
|
205
|
+
tokenName: 'color.chart.gray.bold';
|
|
206
|
+
token: 'var(--ds-chart-gray-bold, #8590A2)';
|
|
207
|
+
};
|
|
208
|
+
'#0055CC': {
|
|
209
|
+
tokenName: 'color.chart.blue.bolder';
|
|
210
|
+
token: 'var(--ds-chart-blue-bolder, #0055CC)';
|
|
211
|
+
};
|
|
212
|
+
'#1D7F8C': {
|
|
213
|
+
tokenName: 'color.chart.teal.bolder';
|
|
214
|
+
token: 'var(--ds-chart-teal-bolder, #1D7F8C)';
|
|
215
|
+
};
|
|
216
|
+
'#177D52': {
|
|
217
|
+
tokenName: 'color.chart.green.bolder';
|
|
218
|
+
token: 'var(--ds-chart-green-bolder, #177D52)';
|
|
219
|
+
};
|
|
220
|
+
'#FF9D00': {
|
|
221
|
+
tokenName: 'color.chart.yellow.bolder';
|
|
222
|
+
token: 'var(--ds-chart-yellow-bolder, #FF9D00)';
|
|
223
|
+
};
|
|
224
|
+
'#B65C02': {
|
|
225
|
+
tokenName: 'color.chart.orange.bolder';
|
|
226
|
+
token: 'var(--ds-chart-orange-bolder, #B65C02)';
|
|
227
|
+
};
|
|
228
|
+
'#D32D03': {
|
|
229
|
+
tokenName: 'color.chart.red.bolder';
|
|
230
|
+
token: 'var(--ds-chart-red-bolder, #D32D03)';
|
|
231
|
+
};
|
|
232
|
+
'#CD519D': {
|
|
233
|
+
tokenName: 'color.chart.magenta.bolder';
|
|
234
|
+
token: 'var(--ds-chart-magenta-bolder, #CD519D)';
|
|
235
|
+
};
|
|
236
|
+
'#5A43D0': {
|
|
237
|
+
tokenName: 'color.chart.purple.bolder';
|
|
238
|
+
token: 'var(--ds-chart-purple-bolder, #5A43D0)';
|
|
239
|
+
};
|
|
240
|
+
'#758195': {
|
|
241
|
+
tokenName: 'color.chart.gray.bolder';
|
|
242
|
+
token: 'var(--ds-chart-gray-bolder, #758195)';
|
|
243
|
+
};
|
|
244
|
+
'#003884': {
|
|
245
|
+
tokenName: 'color.chart.blue.boldest';
|
|
246
|
+
token: 'var(--ds-chart-blue-boldest, #003884)';
|
|
247
|
+
};
|
|
248
|
+
'#206B74': {
|
|
249
|
+
tokenName: 'color.chart.teal.boldest';
|
|
250
|
+
token: 'var(--ds-chart-teal-boldest, #206B74)';
|
|
251
|
+
};
|
|
252
|
+
'#055C3F': {
|
|
253
|
+
tokenName: 'color.chart.green.boldest';
|
|
254
|
+
token: 'var(--ds-chart-green-boldest, #055C3F)';
|
|
255
|
+
};
|
|
256
|
+
'#946104': {
|
|
257
|
+
tokenName: 'color.chart.yellow.boldest';
|
|
258
|
+
token: 'var(--ds-chart-yellow-boldest, #946104)';
|
|
259
|
+
};
|
|
260
|
+
'#974F0C': {
|
|
261
|
+
tokenName: 'color.chart.orange.boldest';
|
|
262
|
+
token: 'var(--ds-chart-orange-boldest, #974F0C)';
|
|
263
|
+
};
|
|
264
|
+
'#A32000': {
|
|
265
|
+
tokenName: 'color.chart.red.boldest';
|
|
266
|
+
token: 'var(--ds-chart-red-boldest, #A32000)';
|
|
267
|
+
};
|
|
268
|
+
'#943D73': {
|
|
269
|
+
tokenName: 'color.chart.magenta.boldest';
|
|
270
|
+
token: 'var(--ds-chart-magenta-boldest, #943D73)';
|
|
271
|
+
};
|
|
272
|
+
'#44368B': {
|
|
273
|
+
tokenName: 'color.chart.purple.boldest';
|
|
274
|
+
token: 'var(--ds-chart-purple-boldest, #44368B)';
|
|
275
|
+
};
|
|
276
|
+
'#44546F': {
|
|
277
|
+
tokenName: 'color.chart.gray.boldest';
|
|
278
|
+
token: 'var(--ds-chart-gray-boldest, #44546F)';
|
|
279
|
+
};
|
|
169
280
|
};
|
|
170
281
|
|
|
171
282
|
// @public (undocumented)
|
|
@@ -229,9 +340,18 @@ export function hexToEditorBorderPaletteColor<HexColor extends string>(
|
|
|
229
340
|
export function hexToEditorTableChartsPaletteColor<HexColor extends string>(
|
|
230
341
|
hexColor: HexColor,
|
|
231
342
|
): HexColor extends EditorTableChartsPaletteKey
|
|
232
|
-
? EditorTableChartsPalette[HexColor]
|
|
343
|
+
? EditorTableChartsPalette[HexColor]['token']
|
|
233
344
|
: string | undefined;
|
|
234
345
|
|
|
346
|
+
// @public (undocumented)
|
|
347
|
+
export function hexToEditorTableChartsPaletteColorTokenName<
|
|
348
|
+
HexColor extends string,
|
|
349
|
+
>(
|
|
350
|
+
hexColor: HexColor,
|
|
351
|
+
): HexColor extends EditorTableChartsPaletteKey
|
|
352
|
+
? EditorTableChartsPalette[HexColor]['tokenName']
|
|
353
|
+
: EditorBackgroundPaletteTokenNames_2 | undefined;
|
|
354
|
+
|
|
235
355
|
// @public
|
|
236
356
|
export function hexToEditorTextPaletteColor<HexColor extends string>(
|
|
237
357
|
hexColor: HexColor,
|
|
@@ -264,6 +384,46 @@ const tokenNames: (
|
|
|
264
384
|
| 'elevation.surface'
|
|
265
385
|
)[];
|
|
266
386
|
|
|
387
|
+
// @public (undocumented)
|
|
388
|
+
const tokenNames_2: (
|
|
389
|
+
| 'color.background.accent.blue.subtle'
|
|
390
|
+
| 'color.background.accent.gray.subtler'
|
|
391
|
+
| 'color.background.accent.green.subtle'
|
|
392
|
+
| 'color.background.accent.magenta.subtle'
|
|
393
|
+
| 'color.background.accent.orange.subtle'
|
|
394
|
+
| 'color.background.accent.purple.subtle'
|
|
395
|
+
| 'color.background.accent.red.subtle'
|
|
396
|
+
| 'color.background.accent.teal.subtle'
|
|
397
|
+
| 'color.background.accent.yellow.subtle'
|
|
398
|
+
| 'color.chart.blue.bold'
|
|
399
|
+
| 'color.chart.blue.bolder'
|
|
400
|
+
| 'color.chart.blue.boldest'
|
|
401
|
+
| 'color.chart.gray.bold'
|
|
402
|
+
| 'color.chart.gray.bolder'
|
|
403
|
+
| 'color.chart.gray.boldest'
|
|
404
|
+
| 'color.chart.green.bold'
|
|
405
|
+
| 'color.chart.green.bolder'
|
|
406
|
+
| 'color.chart.green.boldest'
|
|
407
|
+
| 'color.chart.magenta.bold'
|
|
408
|
+
| 'color.chart.magenta.bolder'
|
|
409
|
+
| 'color.chart.magenta.boldest'
|
|
410
|
+
| 'color.chart.orange.bold'
|
|
411
|
+
| 'color.chart.orange.bolder'
|
|
412
|
+
| 'color.chart.orange.boldest'
|
|
413
|
+
| 'color.chart.purple.bold'
|
|
414
|
+
| 'color.chart.purple.bolder'
|
|
415
|
+
| 'color.chart.purple.boldest'
|
|
416
|
+
| 'color.chart.red.bold'
|
|
417
|
+
| 'color.chart.red.bolder'
|
|
418
|
+
| 'color.chart.red.boldest'
|
|
419
|
+
| 'color.chart.teal.bold'
|
|
420
|
+
| 'color.chart.teal.bolder'
|
|
421
|
+
| 'color.chart.teal.boldest'
|
|
422
|
+
| 'color.chart.yellow.bold'
|
|
423
|
+
| 'color.chart.yellow.bolder'
|
|
424
|
+
| 'color.chart.yellow.boldest'
|
|
425
|
+
)[];
|
|
426
|
+
|
|
267
427
|
// (No @packageDocumentation comment for this package)
|
|
268
428
|
```
|
|
269
429
|
|