@atlaskit/editor-palette 1.1.0 → 1.3.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 (18) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/border.js +39 -0
  3. package/dist/cjs/index.js +13 -0
  4. package/dist/cjs/table-charts.js +123 -3
  5. package/dist/cjs/version.json +1 -1
  6. package/dist/es2019/border.js +36 -0
  7. package/dist/es2019/index.js +2 -1
  8. package/dist/es2019/table-charts.js +156 -39
  9. package/dist/es2019/version.json +1 -1
  10. package/dist/esm/border.js +30 -0
  11. package/dist/esm/index.js +2 -1
  12. package/dist/esm/table-charts.js +122 -3
  13. package/dist/esm/version.json +1 -1
  14. package/dist/types/border.d.ts +29 -0
  15. package/dist/types/index.d.ts +2 -1
  16. package/dist/types/table-charts.d.ts +148 -37
  17. package/package.json +1 -1
  18. package/report.api.md +217 -37
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/editor-palette
2
2
 
3
+ ## 1.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`c2385dcb8f7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c2385dcb8f7) - [ux] ED-17043 Expanded table chart colors from 20 to 36 colors.
8
+
9
+ ### Patch Changes
10
+
11
+ - [`2e01c9c74b5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2e01c9c74b5) - DUMMY remove before merging to master; dupe adf-schema via adf-utils
12
+
13
+ ## 1.2.0
14
+
15
+ ### Minor Changes
16
+
17
+ - [`bf04c417bfd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bf04c417bfd) - Add "border" mark to stage0 ADF schema
18
+
3
19
  ## 1.1.0
4
20
 
5
21
  ### Minor Changes
package/dist/cjs/border.js ADDED
@@ -0,0 +1,39 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.editorBorderPalette = void 0;
8
+ exports.hexToEditorBorderPaletteColor = hexToEditorBorderPaletteColor;
9
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
10
+ var _editorBorderPalette;
11
+ // This import will be stripped on build
12
+ // eslint-disable-next-line import/no-extraneous-dependencies
13
+
14
+ /**
15
+ * This takes an adf hex color and returns a matching border palette color.
16
+ *
17
+ * By providing a design token, this enables ADF content to be rendered in new themes such as dark mode.
18
+ *
19
+ * Example usage
20
+ * ```tsx
21
+ * const cssValue = hexToEditorBorderPaletteColor('#091E4224');
22
+ * // ^? const cssValue: string
23
+ * <div style={{borderColor: cssValue}} />
24
+ * ```
25
+ * The names of tokens can change over time, and the values of tokens will differ between themes.
26
+ * The exact output of this function is an implementation detail and should only be used when rendering
27
+ * content to the user, on a client with a matching major version of `@atlaskit/tokens`.
28
+ * - **DO NOT**: store the output of these functions in any user-generated content or back-end.
29
+ * - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color
30
+ */
31
+
32
+ function hexToEditorBorderPaletteColor(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
+ return editorBorderPalette[hexColor.toUpperCase()];
37
+ }
38
+ var editorBorderPalette = (_editorBorderPalette = {}, (0, _defineProperty2.default)(_editorBorderPalette, '#091E4224', "var(--ds-border, #091E4224)"), (0, _defineProperty2.default)(_editorBorderPalette, '#758195', "var(--ds-border-bold, #758195)"), (0, _defineProperty2.default)(_editorBorderPalette, '#172B4D', "var(--ds-text, #172B4D)"), _editorBorderPalette);
39
+ exports.editorBorderPalette = editorBorderPalette;
package/dist/cjs/index.js CHANGED
@@ -15,12 +15,24 @@ Object.defineProperty(exports, "hexToEditorBackgroundPaletteColorTokenName", {
15
15
  return _background.hexToEditorBackgroundPaletteColorTokenName;
16
16
  }
17
17
  });
18
+ Object.defineProperty(exports, "hexToEditorBorderPaletteColor", {
19
+ enumerable: true,
20
+ get: function get() {
21
+ return _border.hexToEditorBorderPaletteColor;
22
+ }
23
+ });
18
24
  Object.defineProperty(exports, "hexToEditorTableChartsPaletteColor", {
19
25
  enumerable: true,
20
26
  get: function get() {
21
27
  return _tableCharts.hexToEditorTableChartsPaletteColor;
22
28
  }
23
29
  });
30
+ Object.defineProperty(exports, "hexToEditorTableChartsPaletteColorTokenName", {
31
+ enumerable: true,
32
+ get: function get() {
33
+ return _tableCharts.hexToEditorTableChartsPaletteColorTokenName;
34
+ }
35
+ });
24
36
  Object.defineProperty(exports, "hexToEditorTextPaletteColor", {
25
37
  enumerable: true,
26
38
  get: function get() {
@@ -28,5 +40,6 @@ Object.defineProperty(exports, "hexToEditorTextPaletteColor", {
28
40
  }
29
41
  });
30
42
  var _background = require("./background");
43
+ var _border = require("./border");
31
44
  var _text = require("./text");
32
45
  var _tableCharts = require("./table-charts");
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
- return editorTableChartsPalette[hexColor.toUpperCase()];
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', "var(--ds-background-accent-blue-subtle, #7AB2FF)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#60C6D2', "var(--ds-background-accent-teal-subtle, #60C6D2)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#6BE1B0', "var(--ds-background-accent-green-subtle, #6BE1B0)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#FFDB57', "var(--ds-background-accent-yellow-subtle, #FFDB57)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#FAA53D', "var(--ds-background-accent-orange-subtle, #FAA53D)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#FF8F73', "var(--ds-background-accent-red-subtle, #FF8F73)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#E774BB', "var(--ds-background-accent-magenta-subtle, #E774BB)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#B5A7FB', "var(--ds-background-accent-purple-subtle, #B5A7FB)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#8993A5', "var(--ds-background-accent-gray-subtler, #8993A5)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#247FFF', "var(--ds-chart-blue-bold, #247FFF)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#1D9AAA', "var(--ds-chart-teal-bold, #1D9AAA)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#23A971', "var(--ds-chart-green-bold, #23A971)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#FFBE33', "var(--ds-chart-yellow-bold, #FFBE33)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#D97008', "var(--ds-chart-orange-bold, #D97008)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#FC552C', "var(--ds-chart-red-bold, #FC552C)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#DA62AC', "var(--ds-chart-magenta-bold, #DA62AC)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#8B77EE', "var(--ds-chart-purple-bold, #8B77EE)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#8590A2', "var(--ds-chart-gray-bold, #8590A2)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#0055CC', "var(--ds-chart-blue-bolder, #0055CC)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#1D7F8C', "var(--ds-chart-teal-bolder, #1D7F8C)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#177D52', "var(--ds-chart-green-bolder, #177D52)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#FF9D00', "var(--ds-chart-yellow-bolder, #FF9D00)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#B65C02', "var(--ds-chart-orange-bolder, #B65C02)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#D32D03', "var(--ds-chart-red-bolder, #D32D03)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#CD519D', "var(--ds-chart-magenta-bolder, #CD519D)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#5A43D0', "var(--ds-chart-purple-bolder, #5A43D0)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#758195', "var(--ds-chart-gray-bolder, #758195)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#003884', "var(--ds-chart-blue-boldest, #003884)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#206B74', "var(--ds-chart-teal-boldest, #206B74)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#055C3F', "var(--ds-chart-green-boldest, #055C3F)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#946104', "var(--ds-chart-yellow-boldest, #946104)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#974F0C', "var(--ds-chart-orange-boldest, #974F0C)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#A32000', "var(--ds-chart-red-boldest, #A32000)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#943D73', "var(--ds-chart-magenta-boldest, #943D73)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#44368B', "var(--ds-chart-purple-boldest, #44368B)"), (0, _defineProperty2.default)(_editorTableChartsPal, '#44546F', "var(--ds-chart-gray-boldest, #44546F)"), _editorTableChartsPal);
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
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-palette",
3
- "version": "1.1.0",
3
+ "version": "1.3.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/border.js ADDED
@@ -0,0 +1,36 @@
1
+ // This import will be stripped on build
2
+ // eslint-disable-next-line import/no-extraneous-dependencies
3
+
4
+ /**
5
+ * This takes an adf hex color and returns a matching border palette color.
6
+ *
7
+ * By providing a design token, this enables ADF content to be rendered in new themes such as dark mode.
8
+ *
9
+ * Example usage
10
+ * ```tsx
11
+ * const cssValue = hexToEditorBorderPaletteColor('#091E4224');
12
+ * // ^? const cssValue: string
13
+ * <div style={{borderColor: cssValue}} />
14
+ * ```
15
+ * The names of tokens can change over time, and the values of tokens will differ between themes.
16
+ * The exact output of this function is an implementation detail and should only be used when rendering
17
+ * content to the user, on a client with a matching major version of `@atlaskit/tokens`.
18
+ * - **DO NOT**: store the output of these functions in any user-generated content or back-end.
19
+ * - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color
20
+ */
21
+
22
+ export function hexToEditorBorderPaletteColor(hexColor) {
23
+ // Ts ignore used to allow use of conditional return type
24
+ // (preferencing better type on consumption over safety in implementation)
25
+ // @ts-ignore
26
+ return editorBorderPalette[hexColor.toUpperCase()];
27
+ }
28
+ export const editorBorderPalette = {
29
+ // gray
30
+ /** gray - subtle */
31
+ ['#091E4224']: "var(--ds-border, #091E4224)",
32
+ /** gray */
33
+ ['#758195']: "var(--ds-border-bold, #758195)",
34
+ /** gray - bold */
35
+ ['#172B4D']: "var(--ds-text, #172B4D)"
36
+ };
package/dist/es2019/index.js CHANGED
@@ -1,3 +1,4 @@
1
1
  export { hexToEditorBackgroundPaletteColor, hexToEditorBackgroundPaletteColorTokenName } from './background';
2
+ export { hexToEditorBorderPaletteColor } from './border';
2
3
  export { hexToEditorTextPaletteColor } from './text';
3
- export { hexToEditorTableChartsPaletteColor } from './table-charts';
4
+ export { hexToEditorTableChartsPaletteColor, hexToEditorTableChartsPaletteColorTokenName } from './table-charts';
package/dist/es2019/table-charts.js CHANGED
@@ -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
- return editorTableChartsPalette[hexColor.toUpperCase()];
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']: "var(--ds-background-accent-blue-subtle, #7AB2FF)",
45
- ['#60C6D2']: "var(--ds-background-accent-teal-subtle, #60C6D2)",
46
- ['#6BE1B0']: "var(--ds-background-accent-green-subtle, #6BE1B0)",
47
- ['#FFDB57']: "var(--ds-background-accent-yellow-subtle, #FFDB57)",
48
- ['#FAA53D']: "var(--ds-background-accent-orange-subtle, #FAA53D)",
49
- ['#FF8F73']: "var(--ds-background-accent-red-subtle, #FF8F73)",
50
- ['#E774BB']: "var(--ds-background-accent-magenta-subtle, #E774BB)",
51
- ['#B5A7FB']: "var(--ds-background-accent-purple-subtle, #B5A7FB)",
52
- ['#8993A5']: "var(--ds-background-accent-gray-subtler, #8993A5)",
53
- ['#247FFF']: "var(--ds-chart-blue-bold, #247FFF)",
54
- ['#1D9AAA']: "var(--ds-chart-teal-bold, #1D9AAA)",
55
- ['#23A971']: "var(--ds-chart-green-bold, #23A971)",
56
- ['#FFBE33']: "var(--ds-chart-yellow-bold, #FFBE33)",
57
- ['#D97008']: "var(--ds-chart-orange-bold, #D97008)",
58
- ['#FC552C']: "var(--ds-chart-red-bold, #FC552C)",
59
- ['#DA62AC']: "var(--ds-chart-magenta-bold, #DA62AC)",
60
- ['#8B77EE']: "var(--ds-chart-purple-bold, #8B77EE)",
61
- ['#8590A2']: "var(--ds-chart-gray-bold, #8590A2)",
62
- ['#0055CC']: "var(--ds-chart-blue-bolder, #0055CC)",
63
- ['#1D7F8C']: "var(--ds-chart-teal-bolder, #1D7F8C)",
64
- ['#177D52']: "var(--ds-chart-green-bolder, #177D52)",
65
- ['#FF9D00']: "var(--ds-chart-yellow-bolder, #FF9D00)",
66
- ['#B65C02']: "var(--ds-chart-orange-bolder, #B65C02)",
67
- ['#D32D03']: "var(--ds-chart-red-bolder, #D32D03)",
68
- ['#CD519D']: "var(--ds-chart-magenta-bolder, #CD519D)",
69
- ['#5A43D0']: "var(--ds-chart-purple-bolder, #5A43D0)",
70
- ['#758195']: "var(--ds-chart-gray-bolder, #758195)",
71
- ['#003884']: "var(--ds-chart-blue-boldest, #003884)",
72
- ['#206B74']: "var(--ds-chart-teal-boldest, #206B74)",
73
- ['#055C3F']: "var(--ds-chart-green-boldest, #055C3F)",
74
- ['#946104']: "var(--ds-chart-yellow-boldest, #946104)",
75
- ['#974F0C']: "var(--ds-chart-orange-boldest, #974F0C)",
76
- ['#A32000']: "var(--ds-chart-red-boldest, #A32000)",
77
- ['#943D73']: "var(--ds-chart-magenta-boldest, #943D73)",
78
- ['#44368B']: "var(--ds-chart-purple-boldest, #44368B)",
79
- ['#44546F']: "var(--ds-chart-gray-boldest, #44546F)"
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
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-palette",
3
- "version": "1.1.0",
3
+ "version": "1.3.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/border.js ADDED
@@ -0,0 +1,30 @@
1
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
+ var _editorBorderPalette;
3
+ // This import will be stripped on build
4
+ // eslint-disable-next-line import/no-extraneous-dependencies
5
+
6
+ /**
7
+ * This takes an adf hex color and returns a matching border palette color.
8
+ *
9
+ * By providing a design token, this enables ADF content to be rendered in new themes such as dark mode.
10
+ *
11
+ * Example usage
12
+ * ```tsx
13
+ * const cssValue = hexToEditorBorderPaletteColor('#091E4224');
14
+ * // ^? const cssValue: string
15
+ * <div style={{borderColor: cssValue}} />
16
+ * ```
17
+ * The names of tokens can change over time, and the values of tokens will differ between themes.
18
+ * The exact output of this function is an implementation detail and should only be used when rendering
19
+ * content to the user, on a client with a matching major version of `@atlaskit/tokens`.
20
+ * - **DO NOT**: store the output of these functions in any user-generated content or back-end.
21
+ * - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color
22
+ */
23
+
24
+ export function hexToEditorBorderPaletteColor(hexColor) {
25
+ // Ts ignore used to allow use of conditional return type
26
+ // (preferencing better type on consumption over safety in implementation)
27
+ // @ts-ignore
28
+ return editorBorderPalette[hexColor.toUpperCase()];
29
+ }
30
+ export var editorBorderPalette = (_editorBorderPalette = {}, _defineProperty(_editorBorderPalette, '#091E4224', "var(--ds-border, #091E4224)"), _defineProperty(_editorBorderPalette, '#758195', "var(--ds-border-bold, #758195)"), _defineProperty(_editorBorderPalette, '#172B4D', "var(--ds-text, #172B4D)"), _editorBorderPalette);
package/dist/esm/index.js CHANGED
@@ -1,3 +1,4 @@
1
1
  export { hexToEditorBackgroundPaletteColor, hexToEditorBackgroundPaletteColorTokenName } from './background';
2
+ export { hexToEditorBorderPaletteColor } from './border';
2
3
  export { hexToEditorTextPaletteColor } from './text';
3
- 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
- return editorTableChartsPalette[hexColor.toUpperCase()];
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', "var(--ds-background-accent-blue-subtle, #7AB2FF)"), _defineProperty(_editorTableChartsPal, '#60C6D2', "var(--ds-background-accent-teal-subtle, #60C6D2)"), _defineProperty(_editorTableChartsPal, '#6BE1B0', "var(--ds-background-accent-green-subtle, #6BE1B0)"), _defineProperty(_editorTableChartsPal, '#FFDB57', "var(--ds-background-accent-yellow-subtle, #FFDB57)"), _defineProperty(_editorTableChartsPal, '#FAA53D', "var(--ds-background-accent-orange-subtle, #FAA53D)"), _defineProperty(_editorTableChartsPal, '#FF8F73', "var(--ds-background-accent-red-subtle, #FF8F73)"), _defineProperty(_editorTableChartsPal, '#E774BB', "var(--ds-background-accent-magenta-subtle, #E774BB)"), _defineProperty(_editorTableChartsPal, '#B5A7FB', "var(--ds-background-accent-purple-subtle, #B5A7FB)"), _defineProperty(_editorTableChartsPal, '#8993A5', "var(--ds-background-accent-gray-subtler, #8993A5)"), _defineProperty(_editorTableChartsPal, '#247FFF', "var(--ds-chart-blue-bold, #247FFF)"), _defineProperty(_editorTableChartsPal, '#1D9AAA', "var(--ds-chart-teal-bold, #1D9AAA)"), _defineProperty(_editorTableChartsPal, '#23A971', "var(--ds-chart-green-bold, #23A971)"), _defineProperty(_editorTableChartsPal, '#FFBE33', "var(--ds-chart-yellow-bold, #FFBE33)"), _defineProperty(_editorTableChartsPal, '#D97008', "var(--ds-chart-orange-bold, #D97008)"), _defineProperty(_editorTableChartsPal, '#FC552C', "var(--ds-chart-red-bold, #FC552C)"), _defineProperty(_editorTableChartsPal, '#DA62AC', "var(--ds-chart-magenta-bold, #DA62AC)"), _defineProperty(_editorTableChartsPal, '#8B77EE', "var(--ds-chart-purple-bold, #8B77EE)"), _defineProperty(_editorTableChartsPal, '#8590A2', "var(--ds-chart-gray-bold, #8590A2)"), _defineProperty(_editorTableChartsPal, '#0055CC', "var(--ds-chart-blue-bolder, #0055CC)"), _defineProperty(_editorTableChartsPal, '#1D7F8C', "var(--ds-chart-teal-bolder, #1D7F8C)"), _defineProperty(_editorTableChartsPal, '#177D52', "var(--ds-chart-green-bolder, #177D52)"), _defineProperty(_editorTableChartsPal, '#FF9D00', "var(--ds-chart-yellow-bolder, #FF9D00)"), _defineProperty(_editorTableChartsPal, '#B65C02', "var(--ds-chart-orange-bolder, #B65C02)"), _defineProperty(_editorTableChartsPal, '#D32D03', "var(--ds-chart-red-bolder, #D32D03)"), _defineProperty(_editorTableChartsPal, '#CD519D', "var(--ds-chart-magenta-bolder, #CD519D)"), _defineProperty(_editorTableChartsPal, '#5A43D0', "var(--ds-chart-purple-bolder, #5A43D0)"), _defineProperty(_editorTableChartsPal, '#758195', "var(--ds-chart-gray-bolder, #758195)"), _defineProperty(_editorTableChartsPal, '#003884', "var(--ds-chart-blue-boldest, #003884)"), _defineProperty(_editorTableChartsPal, '#206B74', "var(--ds-chart-teal-boldest, #206B74)"), _defineProperty(_editorTableChartsPal, '#055C3F', "var(--ds-chart-green-boldest, #055C3F)"), _defineProperty(_editorTableChartsPal, '#946104', "var(--ds-chart-yellow-boldest, #946104)"), _defineProperty(_editorTableChartsPal, '#974F0C', "var(--ds-chart-orange-boldest, #974F0C)"), _defineProperty(_editorTableChartsPal, '#A32000', "var(--ds-chart-red-boldest, #A32000)"), _defineProperty(_editorTableChartsPal, '#943D73', "var(--ds-chart-magenta-boldest, #943D73)"), _defineProperty(_editorTableChartsPal, '#44368B', "var(--ds-chart-purple-boldest, #44368B)"), _defineProperty(_editorTableChartsPal, '#44546F', "var(--ds-chart-gray-boldest, #44546F)"), _editorTableChartsPal);
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
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-palette",
3
- "version": "1.1.0",
3
+ "version": "1.3.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/types/border.d.ts ADDED
@@ -0,0 +1,29 @@
1
+ /**
2
+ * This takes an adf hex color and returns a matching border palette color.
3
+ *
4
+ * By providing a design token, this enables ADF content to be rendered in new themes such as dark mode.
5
+ *
6
+ * Example usage
7
+ * ```tsx
8
+ * const cssValue = hexToEditorBorderPaletteColor('#091E4224');
9
+ * // ^? const cssValue: string
10
+ * <div style={{borderColor: cssValue}} />
11
+ * ```
12
+ * The names of tokens can change over time, and the values of tokens will differ between themes.
13
+ * The exact output of this function is an implementation detail and should only be used when rendering
14
+ * content to the user, on a client with a matching major version of `@atlaskit/tokens`.
15
+ * - **DO NOT**: store the output of these functions in any user-generated content or back-end.
16
+ * - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color
17
+ */
18
+ export declare function hexToEditorBorderPaletteColor<HexColor extends string>(hexColor: HexColor): HexColor extends EditorBorderPaletteKey ? EditorBorderPalette[HexColor] : string | undefined;
19
+ declare type EditorBorderPalette = typeof editorBorderPalette;
20
+ export declare type EditorBorderPaletteKey = keyof EditorBorderPalette;
21
+ export declare const editorBorderPalette: {
22
+ /** gray - subtle */
23
+ "#091E4224": "var(--ds-border, #091E4224)";
24
+ /** gray */
25
+ "#758195": "var(--ds-border-bold, #758195)";
26
+ /** gray - bold */
27
+ "#172B4D": "var(--ds-text, #172B4D)";
28
+ };
29
+ export {};
package/dist/types/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  export { hexToEditorBackgroundPaletteColor, hexToEditorBackgroundPaletteColorTokenName, } from './background';
2
+ export { hexToEditorBorderPaletteColor } from './border';
2
3
  export { hexToEditorTextPaletteColor } from './text';
3
- export { hexToEditorTableChartsPaletteColor } from './table-charts';
4
+ export { hexToEditorTableChartsPaletteColor, hexToEditorTableChartsPaletteColorTokenName, } from './table-charts';
package/dist/types/table-charts.d.ts CHANGED
@@ -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": "var(--ds-background-accent-blue-subtle, #7AB2FF)";
35
- "#60C6D2": "var(--ds-background-accent-teal-subtle, #60C6D2)";
36
- "#6BE1B0": "var(--ds-background-accent-green-subtle, #6BE1B0)";
37
- "#FFDB57": "var(--ds-background-accent-yellow-subtle, #FFDB57)";
38
- "#FAA53D": "var(--ds-background-accent-orange-subtle, #FAA53D)";
39
- "#FF8F73": "var(--ds-background-accent-red-subtle, #FF8F73)";
40
- "#E774BB": "var(--ds-background-accent-magenta-subtle, #E774BB)";
41
- "#B5A7FB": "var(--ds-background-accent-purple-subtle, #B5A7FB)";
42
- "#8993A5": "var(--ds-background-accent-gray-subtler, #8993A5)";
43
- "#247FFF": "var(--ds-chart-blue-bold, #247FFF)";
44
- "#1D9AAA": "var(--ds-chart-teal-bold, #1D9AAA)";
45
- "#23A971": "var(--ds-chart-green-bold, #23A971)";
46
- "#FFBE33": "var(--ds-chart-yellow-bold, #FFBE33)";
47
- "#D97008": "var(--ds-chart-orange-bold, #D97008)";
48
- "#FC552C": "var(--ds-chart-red-bold, #FC552C)";
49
- "#DA62AC": "var(--ds-chart-magenta-bold, #DA62AC)";
50
- "#8B77EE": "var(--ds-chart-purple-bold, #8B77EE)";
51
- "#8590A2": "var(--ds-chart-gray-bold, #8590A2)";
52
- "#0055CC": "var(--ds-chart-blue-bolder, #0055CC)";
53
- "#1D7F8C": "var(--ds-chart-teal-bolder, #1D7F8C)";
54
- "#177D52": "var(--ds-chart-green-bolder, #177D52)";
55
- "#FF9D00": "var(--ds-chart-yellow-bolder, #FF9D00)";
56
- "#B65C02": "var(--ds-chart-orange-bolder, #B65C02)";
57
- "#D32D03": "var(--ds-chart-red-bolder, #D32D03)";
58
- "#CD519D": "var(--ds-chart-magenta-bolder, #CD519D)";
59
- "#5A43D0": "var(--ds-chart-purple-bolder, #5A43D0)";
60
- "#758195": "var(--ds-chart-gray-bolder, #758195)";
61
- "#003884": "var(--ds-chart-blue-boldest, #003884)";
62
- "#206B74": "var(--ds-chart-teal-boldest, #206B74)";
63
- "#055C3F": "var(--ds-chart-green-boldest, #055C3F)";
64
- "#946104": "var(--ds-chart-yellow-boldest, #946104)";
65
- "#974F0C": "var(--ds-chart-orange-boldest, #974F0C)";
66
- "#A32000": "var(--ds-chart-red-boldest, #A32000)";
67
- "#943D73": "var(--ds-chart-magenta-boldest, #943D73)";
68
- "#44368B": "var(--ds-chart-purple-boldest, #44368B)";
69
- "#44546F": "var(--ds-chart-gray-boldest, #44546F)";
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.1.0",
3
+ "version": "1.3.0",
4
4
  "description": "The editor palette",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
package/report.api.md CHANGED
@@ -112,47 +112,171 @@ type EditorBackgroundPaletteKey = keyof EditorBackgroundPalette;
112
112
  // @public (undocumented)
113
113
  type EditorBackgroundPaletteTokenNames = typeof tokenNames[number];
114
114
 
115
+ // @public (undocumented)
116
+ type EditorBackgroundPaletteTokenNames_2 = typeof tokenNames_2[number];
117
+
118
+ // @public (undocumented)
119
+ type EditorBorderPalette = typeof editorBorderPalette;
120
+
121
+ // @public (undocumented)
122
+ const editorBorderPalette: {
123
+ '#091E4224': 'var(--ds-border, #091E4224)';
124
+ '#758195': 'var(--ds-border-bold, #758195)';
125
+ '#172B4D': 'var(--ds-text, #172B4D)';
126
+ };
127
+
128
+ // @public (undocumented)
129
+ type EditorBorderPaletteKey = keyof EditorBorderPalette;
130
+
115
131
  // @public (undocumented)
116
132
  type EditorTableChartsPalette = typeof editorTableChartsPalette;
117
133
 
118
134
  // @public
119
135
  const editorTableChartsPalette: {
120
- '#7AB2FF': 'var(--ds-background-accent-blue-subtle, #7AB2FF)';
121
- '#60C6D2': 'var(--ds-background-accent-teal-subtle, #60C6D2)';
122
- '#6BE1B0': 'var(--ds-background-accent-green-subtle, #6BE1B0)';
123
- '#FFDB57': 'var(--ds-background-accent-yellow-subtle, #FFDB57)';
124
- '#FAA53D': 'var(--ds-background-accent-orange-subtle, #FAA53D)';
125
- '#FF8F73': 'var(--ds-background-accent-red-subtle, #FF8F73)';
126
- '#E774BB': 'var(--ds-background-accent-magenta-subtle, #E774BB)';
127
- '#B5A7FB': 'var(--ds-background-accent-purple-subtle, #B5A7FB)';
128
- '#8993A5': 'var(--ds-background-accent-gray-subtler, #8993A5)';
129
- '#247FFF': 'var(--ds-chart-blue-bold, #247FFF)';
130
- '#1D9AAA': 'var(--ds-chart-teal-bold, #1D9AAA)';
131
- '#23A971': 'var(--ds-chart-green-bold, #23A971)';
132
- '#FFBE33': 'var(--ds-chart-yellow-bold, #FFBE33)';
133
- '#D97008': 'var(--ds-chart-orange-bold, #D97008)';
134
- '#FC552C': 'var(--ds-chart-red-bold, #FC552C)';
135
- '#DA62AC': 'var(--ds-chart-magenta-bold, #DA62AC)';
136
- '#8B77EE': 'var(--ds-chart-purple-bold, #8B77EE)';
137
- '#8590A2': 'var(--ds-chart-gray-bold, #8590A2)';
138
- '#0055CC': 'var(--ds-chart-blue-bolder, #0055CC)';
139
- '#1D7F8C': 'var(--ds-chart-teal-bolder, #1D7F8C)';
140
- '#177D52': 'var(--ds-chart-green-bolder, #177D52)';
141
- '#FF9D00': 'var(--ds-chart-yellow-bolder, #FF9D00)';
142
- '#B65C02': 'var(--ds-chart-orange-bolder, #B65C02)';
143
- '#D32D03': 'var(--ds-chart-red-bolder, #D32D03)';
144
- '#CD519D': 'var(--ds-chart-magenta-bolder, #CD519D)';
145
- '#5A43D0': 'var(--ds-chart-purple-bolder, #5A43D0)';
146
- '#758195': 'var(--ds-chart-gray-bolder, #758195)';
147
- '#003884': 'var(--ds-chart-blue-boldest, #003884)';
148
- '#206B74': 'var(--ds-chart-teal-boldest, #206B74)';
149
- '#055C3F': 'var(--ds-chart-green-boldest, #055C3F)';
150
- '#946104': 'var(--ds-chart-yellow-boldest, #946104)';
151
- '#974F0C': 'var(--ds-chart-orange-boldest, #974F0C)';
152
- '#A32000': 'var(--ds-chart-red-boldest, #A32000)';
153
- '#943D73': 'var(--ds-chart-magenta-boldest, #943D73)';
154
- '#44368B': 'var(--ds-chart-purple-boldest, #44368B)';
155
- '#44546F': 'var(--ds-chart-gray-boldest, #44546F)';
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
+ };
156
280
  };
157
281
 
158
282
  // @public (undocumented)
@@ -205,13 +329,29 @@ export function hexToEditorBackgroundPaletteColorTokenName<
205
329
  ? EditorBackgroundPalette[HexColor]['tokenName']
206
330
  : EditorBackgroundPaletteTokenNames | undefined;
207
331
 
332
+ // @public
333
+ export function hexToEditorBorderPaletteColor<HexColor extends string>(
334
+ hexColor: HexColor,
335
+ ): HexColor extends EditorBorderPaletteKey
336
+ ? EditorBorderPalette[HexColor]
337
+ : string | undefined;
338
+
208
339
  // @public
209
340
  export function hexToEditorTableChartsPaletteColor<HexColor extends string>(
210
341
  hexColor: HexColor,
211
342
  ): HexColor extends EditorTableChartsPaletteKey
212
- ? EditorTableChartsPalette[HexColor]
343
+ ? EditorTableChartsPalette[HexColor]['token']
213
344
  : string | undefined;
214
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
+
215
355
  // @public
216
356
  export function hexToEditorTextPaletteColor<HexColor extends string>(
217
357
  hexColor: HexColor,
@@ -244,6 +384,46 @@ const tokenNames: (
244
384
  | 'elevation.surface'
245
385
  )[];
246
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
+
247
427
  // (No @packageDocumentation comment for this package)
248
428
  ```
249
429