@atlaskit/editor-palette 0.1.0 → 1.1.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 (22) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/cjs/background.js +83 -8
  3. package/dist/cjs/index.js +8 -9
  4. package/dist/cjs/table-charts.js +52 -0
  5. package/dist/cjs/text.js +1 -5
  6. package/dist/cjs/version.json +1 -1
  7. package/dist/es2019/background.js +107 -50
  8. package/dist/es2019/index.js +3 -2
  9. package/dist/es2019/table-charts.js +80 -0
  10. package/dist/es2019/text.js +7 -22
  11. package/dist/es2019/version.json +1 -1
  12. package/dist/esm/background.js +81 -4
  13. package/dist/esm/index.js +3 -2
  14. package/dist/esm/table-charts.js +45 -0
  15. package/dist/esm/text.js +1 -2
  16. package/dist/esm/version.json +1 -1
  17. package/dist/types/background.d.ts +88 -22
  18. package/dist/types/index.d.ts +3 -2
  19. package/dist/types/table-charts.d.ts +71 -0
  20. package/docs/0-intro.tsx +95 -0
  21. package/package.json +7 -3
  22. package/report.api.md +189 -25
package/CHANGELOG.md CHANGED
@@ -1 +1,14 @@
1
1
  # @atlaskit/editor-palette
2
+
3
+ ## 1.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`47934727661`](https://bitbucket.org/atlassian/atlassian-frontend/commits/47934727661) - ED-17042 - Add map hex colors to DST chart tokens
8
+ - [`2367ba14aa0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2367ba14aa0) - [ux] ED-16758 Added support for theme tokens in table cell background color.
9
+
10
+ ## 1.0.0
11
+
12
+ ### Major Changes
13
+
14
+ - [`0ea58bc9901`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0ea58bc9901) - Remove undocumented palette object entrypoints
package/dist/cjs/background.js CHANGED
@@ -1,17 +1,14 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.editorBackgroundPalette = void 0;
9
8
  exports.hexToEditorBackgroundPaletteColor = hexToEditorBackgroundPaletteColor;
10
-
9
+ exports.hexToEditorBackgroundPaletteColorTokenName = hexToEditorBackgroundPaletteColorTokenName;
11
10
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
12
-
13
11
  var _editorBackgroundPale;
14
-
15
12
  // This import will be stripped on build
16
13
  // eslint-disable-next-line import/no-extraneous-dependencies
17
14
 
@@ -38,11 +35,89 @@ function hexToEditorBackgroundPaletteColor(hexColor) {
38
35
  // Ts ignore used to allow use of conditional return type
39
36
  // (preferencing better type on consumption over safety in implementation)
40
37
  // @ts-ignore
41
- return editorBackgroundPalette[hexColor.toUpperCase()];
38
+ var tokenData = editorBackgroundPalette[hexColor.toUpperCase()];
39
+ return tokenData ? tokenData.token : undefined;
40
+ }
41
+ function hexToEditorBackgroundPaletteColorTokenName(hexColor) {
42
+ // Ts ignore used to allow use of conditional return type
43
+ // (preferencing better type on consumption over safety in implementation)
44
+ // @ts-ignore
45
+ var tokenData = editorBackgroundPalette[hexColor.toUpperCase()];
46
+ return tokenData ? tokenData.tokenName : undefined;
42
47
  }
43
-
44
48
  // Colors taken from
45
49
  // https://hello.atlassian.net/wiki/spaces/DST/pages/1790979421/DSTRFC-002+-+Shifting+Editor+s+color+palette+to+design+tokens
50
+
46
51
  // values are asserted to improve generated type declarations
47
- var editorBackgroundPalette = (_editorBackgroundPale = {}, (0, _defineProperty2.default)(_editorBackgroundPale, '#DEEBFF', "var(--ds-background-accent-blue-subtlest, #DEEBFF)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#B3D4FF', "var(--ds-background-accent-blue-subtler, #B3D4FF)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#4C9AFF', "var(--ds-background-accent-blue-subtle, #4C9AFF)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#E6FCFF', "var(--ds-background-accent-teal-subtlest, #E6FCFF)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#B3F5FF', "var(--ds-background-accent-teal-subtler, #B3F5FF)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#79E2F2', "var(--ds-background-accent-teal-subtle, #79E2F2)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#E3FCEF', "var(--ds-background-accent-green-subtlest, #E3FCEF)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#ABF5D1', "var(--ds-background-accent-green-subtler, #ABF5D1)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#57D9A3', "var(--ds-background-accent-green-subtle, #57D9A3)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#FFFAE6', "var(--ds-background-accent-yellow-subtlest, #FFFAE6)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#FFF0B3', "var(--ds-background-accent-yellow-subtler, #FFF0B3)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#FFC400', "var(--ds-background-accent-orange-subtle, #FFC400)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#FFEBE6', "var(--ds-background-accent-red-subtlest, #FFEBE6)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#FFBDAD', "var(--ds-background-accent-red-subtler, #FFBDAD)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#FF8F73', "var(--ds-background-accent-red-subtle, #FF8F73)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#EAE6FF', "var(--ds-background-accent-purple-subtlest, #EAE6FF)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#C0B6F2', "var(--ds-background-accent-purple-subtler, #C0B6F2)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#998DD9', "var(--ds-background-accent-purple-subtle, #998DD9)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#FFFFFF', "var(--ds-surface, #FFFFFF)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#F4F5F7', "var(--ds-background-accent-gray-subtlest, #F4F5F7)"), (0, _defineProperty2.default)(_editorBackgroundPale, '#B3BAC5', "var(--ds-background-accent-gray-subtle, #B3BAC5)"), _editorBackgroundPale);
48
- exports.editorBackgroundPalette = editorBackgroundPalette;
52
+ // Modified structure as having tokenName, token
53
+ // and possibly editorColorName in future will make it
54
+ // simpler to link everything together.
55
+ var editorBackgroundPalette = (_editorBackgroundPale = {}, (0, _defineProperty2.default)(_editorBackgroundPale, '#DEEBFF', {
56
+ tokenName: 'color.background.accent.blue.subtlest',
57
+ token: "var(--ds-background-accent-blue-subtlest, #DEEBFF)"
58
+ }), (0, _defineProperty2.default)(_editorBackgroundPale, '#B3D4FF', {
59
+ tokenName: 'color.background.accent.blue.subtler',
60
+ token: "var(--ds-background-accent-blue-subtler, #B3D4FF)"
61
+ }), (0, _defineProperty2.default)(_editorBackgroundPale, '#4C9AFF', {
62
+ tokenName: 'color.background.accent.blue.subtle',
63
+ token: "var(--ds-background-accent-blue-subtle, #4C9AFF)"
64
+ }), (0, _defineProperty2.default)(_editorBackgroundPale, '#E6FCFF', {
65
+ tokenName: 'color.background.accent.teal.subtlest',
66
+ token: "var(--ds-background-accent-teal-subtlest, #E6FCFF)" // source for hex code was legacy token T50,
67
+ }), (0, _defineProperty2.default)(_editorBackgroundPale, '#B3F5FF', {
68
+ tokenName: 'color.background.accent.teal.subtler',
69
+ token: "var(--ds-background-accent-teal-subtler, #B3F5FF)" // source for hex code was legacy token T75,
70
+ }), (0, _defineProperty2.default)(_editorBackgroundPale, '#79E2F2', {
71
+ tokenName: 'color.background.accent.teal.subtle',
72
+ token: "var(--ds-background-accent-teal-subtle, #79E2F2)" // source for hex code was legacy token T100,
73
+ }), (0, _defineProperty2.default)(_editorBackgroundPale, '#E3FCEF', {
74
+ tokenName: 'color.background.accent.green.subtlest',
75
+ token: "var(--ds-background-accent-green-subtlest, #E3FCEF)" // source for hex code was legacy token G50,
76
+ }), (0, _defineProperty2.default)(_editorBackgroundPale, '#ABF5D1', {
77
+ tokenName: 'color.background.accent.green.subtler',
78
+ token: "var(--ds-background-accent-green-subtler, #ABF5D1)" // source for hex code was legacy token G75,
79
+ }), (0, _defineProperty2.default)(_editorBackgroundPale, '#57D9A3', {
80
+ tokenName: 'color.background.accent.green.subtle',
81
+ token: "var(--ds-background-accent-green-subtle, #57D9A3)" // source for hex code was legacy token G200,
82
+ }), (0, _defineProperty2.default)(_editorBackgroundPale, '#FFFAE6', {
83
+ tokenName: 'color.background.accent.yellow.subtlest',
84
+ token: "var(--ds-background-accent-yellow-subtlest, #FFFAE6)" // source for hex code was legacy token Y50,
85
+ }), (0, _defineProperty2.default)(_editorBackgroundPale, '#FFF0B3', {
86
+ tokenName: 'color.background.accent.yellow.subtler',
87
+ token: "var(--ds-background-accent-yellow-subtler, #FFF0B3)" // source for hex code was legacy token Y75,
88
+ }), (0, _defineProperty2.default)(_editorBackgroundPale, '#FFC400', {
89
+ tokenName: 'color.background.accent.orange.subtle',
90
+ token: "var(--ds-background-accent-orange-subtle, #FFC400)" // source for hex code was legacy token Y200,
91
+ }), (0, _defineProperty2.default)(_editorBackgroundPale, '#FFEBE6', {
92
+ tokenName: 'color.background.accent.red.subtlest',
93
+ token: "var(--ds-background-accent-red-subtlest, #FFEBE6)" // source for hex code was legacy token R50,
94
+ }), (0, _defineProperty2.default)(_editorBackgroundPale, '#FFBDAD', {
95
+ tokenName: 'color.background.accent.red.subtler',
96
+ token: "var(--ds-background-accent-red-subtler, #FFBDAD)" // source for hex code was legacy token R75,
97
+ }), (0, _defineProperty2.default)(_editorBackgroundPale, '#FF8F73', {
98
+ tokenName: 'color.background.accent.red.subtle',
99
+ token: "var(--ds-background-accent-red-subtle, #FF8F73)" // source for hex code was legacy token R100,
100
+ }), (0, _defineProperty2.default)(_editorBackgroundPale, '#EAE6FF', {
101
+ tokenName: 'color.background.accent.purple.subtlest',
102
+ token: "var(--ds-background-accent-purple-subtlest, #EAE6FF)" // source for hex code was legacy token P50,
103
+ }), (0, _defineProperty2.default)(_editorBackgroundPale, '#C0B6F2', {
104
+ tokenName: 'color.background.accent.purple.subtler',
105
+ token: "var(--ds-background-accent-purple-subtler, #C0B6F2)" // source for hex code was legacy token P75,
106
+ }), (0, _defineProperty2.default)(_editorBackgroundPale, '#998DD9', {
107
+ tokenName: 'color.background.accent.purple.subtle',
108
+ token: "var(--ds-background-accent-purple-subtle, #998DD9)" // source for hex code was legacy token P100,
109
+ }), (0, _defineProperty2.default)(_editorBackgroundPale, '#FFFFFF', {
110
+ tokenName: 'elevation.surface',
111
+ token: "var(--ds-surface, #FFFFFF)" // source for hex code was legacy token N0,
112
+ }), (0, _defineProperty2.default)(_editorBackgroundPale, '#F4F5F7', {
113
+ tokenName: 'color.background.accent.gray.subtlest',
114
+ token: "var(--ds-background-accent-gray-subtlest, #F4F5F7)" // source for hex code was legacy token N20,
115
+ }), (0, _defineProperty2.default)(_editorBackgroundPale, '#B3BAC5', {
116
+ tokenName: 'color.background.accent.gray.subtle',
117
+ token: "var(--ds-background-accent-gray-subtle, #B3BAC5)" // source for hex code was legacy token N60,
118
+ }), _editorBackgroundPale);
119
+ exports.editorBackgroundPalette = editorBackgroundPalette;
120
+ var backgroundPaletteKeys = Object.keys(editorBackgroundPalette);
121
+ var tokenNames = backgroundPaletteKeys.map(function (hexCode) {
122
+ return editorBackgroundPalette[hexCode].tokenName;
123
+ });
package/dist/cjs/index.js CHANGED
@@ -3,22 +3,22 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- Object.defineProperty(exports, "editorBackgroundPalette", {
6
+ Object.defineProperty(exports, "hexToEditorBackgroundPaletteColor", {
7
7
  enumerable: true,
8
8
  get: function get() {
9
- return _background.editorBackgroundPalette;
9
+ return _background.hexToEditorBackgroundPaletteColor;
10
10
  }
11
11
  });
12
- Object.defineProperty(exports, "editorTextPalette", {
12
+ Object.defineProperty(exports, "hexToEditorBackgroundPaletteColorTokenName", {
13
13
  enumerable: true,
14
14
  get: function get() {
15
- return _text.editorTextPalette;
15
+ return _background.hexToEditorBackgroundPaletteColorTokenName;
16
16
  }
17
17
  });
18
- Object.defineProperty(exports, "hexToEditorBackgroundPaletteColor", {
18
+ Object.defineProperty(exports, "hexToEditorTableChartsPaletteColor", {
19
19
  enumerable: true,
20
20
  get: function get() {
21
- return _background.hexToEditorBackgroundPaletteColor;
21
+ return _tableCharts.hexToEditorTableChartsPaletteColor;
22
22
  }
23
23
  });
24
24
  Object.defineProperty(exports, "hexToEditorTextPaletteColor", {
@@ -27,7 +27,6 @@ Object.defineProperty(exports, "hexToEditorTextPaletteColor", {
27
27
  return _text.hexToEditorTextPaletteColor;
28
28
  }
29
29
  });
30
-
31
30
  var _background = require("./background");
32
-
33
- var _text = require("./text");
31
+ var _text = require("./text");
32
+ var _tableCharts = require("./table-charts");
package/dist/cjs/table-charts.js ADDED
@@ -0,0 +1,52 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.hexToEditorTableChartsPaletteColor = hexToEditorTableChartsPaletteColor;
8
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
+ var _editorTableChartsPal;
10
+ // This import will be stripped on build
11
+ // eslint-disable-next-line import/no-extraneous-dependencies
12
+
13
+ /**
14
+ * This takes an adf hex color and returns a matching chart palette
15
+ * 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 = hexToEditorTableChartsPaletteColor('#FFFFFF');
22
+ * // ^? const cssValue: string
23
+ * <div style={{backgroundColor: cssValue}} />
24
+ * ```
25
+ *
26
+ * The names of tokens can change over time, and the values of tokens will differ between themes.
27
+ * The exact output of this function is an implementation detail and should only be used when rendering
28
+ * content to the user, on a client with a matching major version of `@atlaskit/tokens`.
29
+ * - **DO NOT**: store the output of these functions in any user-generated content or back-end.
30
+ * - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color
31
+ */
32
+ function hexToEditorTableChartsPaletteColor(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 editorTableChartsPalette[hexColor.toUpperCase()];
37
+ }
38
+ // Colors taken from
39
+ // https://hello.atlassian.net/wiki/spaces/DST/pages/1790979421/DSTRFC-002+-+Shifting+Editor+s+color+palette+to+design+tokens
40
+ // values are asserted to improve generated type declarations
41
+
42
+ /**
43
+ * Tokenize hex codes into DST chart colors or
44
+ * into DST background.accent colors.
45
+ *
46
+ * The hex codes do not match the DST tokens, they are
47
+ * constants that are saved in the ADF that will be rendered
48
+ * as the mapped DST token.
49
+ *
50
+ * https://product-fabric.atlassian.net/browse/ED-17042
51
+ */
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);
package/dist/cjs/text.js CHANGED
@@ -1,17 +1,13 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.editorTextPalette = void 0;
9
8
  exports.hexToEditorTextPaletteColor = hexToEditorTextPaletteColor;
10
-
11
9
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
12
-
13
10
  var _editorTextPalette;
14
-
15
11
  // This import will be stripped on build
16
12
  // eslint-disable-next-line import/no-extraneous-dependencies
17
13
 
@@ -32,13 +28,13 @@ var _editorTextPalette;
32
28
  * - **DO NOT**: store the output of these functions in any user-generated content or back-end.
33
29
  * - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color
34
30
  */
31
+
35
32
  function hexToEditorTextPaletteColor(hexColor) {
36
33
  // Ts ignore used to allow use of conditional return type
37
34
  // (preferencing better type on consumption over safety in implementation)
38
35
  // @ts-ignore
39
36
  return editorTextPalette[hexColor.toUpperCase()];
40
37
  }
41
-
42
38
  // Colors taken from
43
39
  // https://hello.atlassian.net/wiki/spaces/DST/pages/1790979421/DSTRFC-002+-+Shifting+Editor+s+color+palette+to+design+tokens
44
40
  // values are asserted to improve generated type declarations
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-palette",
3
- "version": "0.1.0",
3
+ "version": "1.1.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/background.js CHANGED
@@ -24,101 +24,158 @@ export function hexToEditorBackgroundPaletteColor(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 editorBackgroundPalette[hexColor.toUpperCase()];
27
+ const tokenData = editorBackgroundPalette[hexColor.toUpperCase()];
28
+ return tokenData ? tokenData.token : undefined;
29
+ }
30
+ export function hexToEditorBackgroundPaletteColorTokenName(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 = editorBackgroundPalette[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
39
+
31
40
  // values are asserted to improve generated type declarations
41
+ // Modified structure as having tokenName, token
42
+ // and possibly editorColorName in future will make it
43
+ // simpler to link everything together.
32
44
  export const editorBackgroundPalette = {
33
45
  // blue
34
-
35
46
  /** blue - light */
36
- ['#DEEBFF']: "var(--ds-background-accent-blue-subtlest, #DEEBFF)",
47
+ ['#DEEBFF']: {
48
+ tokenName: 'color.background.accent.blue.subtlest',
49
+ token: "var(--ds-background-accent-blue-subtlest, #DEEBFF)"
50
+ },
37
51
  // source for hex code was legacy token B50
38
-
39
52
  /** blue - medium */
40
- ['#B3D4FF']: "var(--ds-background-accent-blue-subtler, #B3D4FF)",
53
+ ['#B3D4FF']: {
54
+ tokenName: 'color.background.accent.blue.subtler',
55
+ token: "var(--ds-background-accent-blue-subtler, #B3D4FF)"
56
+ },
41
57
  // source for hex code was legacy token B75
42
-
43
58
  /** blue - strong */
44
- ['#4C9AFF']: "var(--ds-background-accent-blue-subtle, #4C9AFF)",
59
+ ['#4C9AFF']: {
60
+ tokenName: 'color.background.accent.blue.subtle',
61
+ token: "var(--ds-background-accent-blue-subtle, #4C9AFF)"
62
+ },
45
63
  // source for hex code was legacy token B100
46
- // teal
47
64
 
65
+ // teal
48
66
  /** teal - light */
49
- ['#E6FCFF']: "var(--ds-background-accent-teal-subtlest, #E6FCFF)",
50
- // source for hex code was legacy token T50
67
+ ['#E6FCFF']: {
68
+ tokenName: 'color.background.accent.teal.subtlest',
69
+ token: "var(--ds-background-accent-teal-subtlest, #E6FCFF)" // source for hex code was legacy token T50,
70
+ },
51
71
 
52
72
  /** teal - medium */
53
- ['#B3F5FF']: "var(--ds-background-accent-teal-subtler, #B3F5FF)",
54
- // source for hex code was legacy token T75
73
+ ['#B3F5FF']: {
74
+ tokenName: 'color.background.accent.teal.subtler',
75
+ token: "var(--ds-background-accent-teal-subtler, #B3F5FF)" // source for hex code was legacy token T75,
76
+ },
55
77
 
56
78
  /** teal - strong */
57
- ['#79E2F2']: "var(--ds-background-accent-teal-subtle, #79E2F2)",
58
- // source for hex code was legacy token T100
59
- // green
79
+ ['#79E2F2']: {
80
+ tokenName: 'color.background.accent.teal.subtle',
81
+ token: "var(--ds-background-accent-teal-subtle, #79E2F2)" // source for hex code was legacy token T100,
82
+ },
60
83
 
84
+ // green
61
85
  /** green - light */
62
- ['#E3FCEF']: "var(--ds-background-accent-green-subtlest, #E3FCEF)",
63
- // source for hex code was legacy token G50
86
+ ['#E3FCEF']: {
87
+ tokenName: 'color.background.accent.green.subtlest',
88
+ token: "var(--ds-background-accent-green-subtlest, #E3FCEF)" // source for hex code was legacy token G50,
89
+ },
64
90
 
65
91
  /** green - medium */
66
- ['#ABF5D1']: "var(--ds-background-accent-green-subtler, #ABF5D1)",
67
- // source for hex code was legacy token G75
92
+ ['#ABF5D1']: {
93
+ tokenName: 'color.background.accent.green.subtler',
94
+ token: "var(--ds-background-accent-green-subtler, #ABF5D1)" // source for hex code was legacy token G75,
95
+ },
68
96
 
69
97
  /** green - strong */
70
- ['#57D9A3']: "var(--ds-background-accent-green-subtle, #57D9A3)",
71
- // source for hex code was legacy token G200
72
- // yellowOrange
98
+ ['#57D9A3']: {
99
+ tokenName: 'color.background.accent.green.subtle',
100
+ token: "var(--ds-background-accent-green-subtle, #57D9A3)" // source for hex code was legacy token G200,
101
+ },
73
102
 
103
+ // yellowOrange
74
104
  /** yellowOrange - light */
75
- ['#FFFAE6']: "var(--ds-background-accent-yellow-subtlest, #FFFAE6)",
76
- // source for hex code was legacy token Y50
105
+ ['#FFFAE6']: {
106
+ tokenName: 'color.background.accent.yellow.subtlest',
107
+ token: "var(--ds-background-accent-yellow-subtlest, #FFFAE6)" // source for hex code was legacy token Y50,
108
+ },
77
109
 
78
110
  /** yellowOrange - medium */
79
- ['#FFF0B3']: "var(--ds-background-accent-yellow-subtler, #FFF0B3)",
80
- // source for hex code was legacy token Y75
111
+ ['#FFF0B3']: {
112
+ tokenName: 'color.background.accent.yellow.subtler',
113
+ token: "var(--ds-background-accent-yellow-subtler, #FFF0B3)" // source for hex code was legacy token Y75,
114
+ },
81
115
 
82
116
  /** yellowOrange - strong */
83
- ['#FFC400']: "var(--ds-background-accent-orange-subtle, #FFC400)",
84
- // source for hex code was legacy token Y200
85
- // red
117
+ ['#FFC400']: {
118
+ tokenName: 'color.background.accent.orange.subtle',
119
+ token: "var(--ds-background-accent-orange-subtle, #FFC400)" // source for hex code was legacy token Y200,
120
+ },
86
121
 
122
+ // red
87
123
  /** red - light */
88
- ['#FFEBE6']: "var(--ds-background-accent-red-subtlest, #FFEBE6)",
89
- // source for hex code was legacy token R50
124
+ ['#FFEBE6']: {
125
+ tokenName: 'color.background.accent.red.subtlest',
126
+ token: "var(--ds-background-accent-red-subtlest, #FFEBE6)" // source for hex code was legacy token R50,
127
+ },
90
128
 
91
129
  /** red - medium */
92
- ['#FFBDAD']: "var(--ds-background-accent-red-subtler, #FFBDAD)",
93
- // source for hex code was legacy token R75
130
+ ['#FFBDAD']: {
131
+ tokenName: 'color.background.accent.red.subtler',
132
+ token: "var(--ds-background-accent-red-subtler, #FFBDAD)" // source for hex code was legacy token R75,
133
+ },
94
134
 
95
135
  /** red - strong */
96
- ['#FF8F73']: "var(--ds-background-accent-red-subtle, #FF8F73)",
97
- // source for hex code was legacy token R100
98
- // purple
136
+ ['#FF8F73']: {
137
+ tokenName: 'color.background.accent.red.subtle',
138
+ token: "var(--ds-background-accent-red-subtle, #FF8F73)" // source for hex code was legacy token R100,
139
+ },
99
140
 
141
+ // purple
100
142
  /** purple - light */
101
- ['#EAE6FF']: "var(--ds-background-accent-purple-subtlest, #EAE6FF)",
102
- // source for hex code was legacy token P50
143
+ ['#EAE6FF']: {
144
+ tokenName: 'color.background.accent.purple.subtlest',
145
+ token: "var(--ds-background-accent-purple-subtlest, #EAE6FF)" // source for hex code was legacy token P50,
146
+ },
103
147
 
104
148
  /** purple - medium */
105
- ['#C0B6F2']: "var(--ds-background-accent-purple-subtler, #C0B6F2)",
106
- // source for hex code was legacy token P75
149
+ ['#C0B6F2']: {
150
+ tokenName: 'color.background.accent.purple.subtler',
151
+ token: "var(--ds-background-accent-purple-subtler, #C0B6F2)" // source for hex code was legacy token P75,
152
+ },
107
153
 
108
154
  /** purple - strong */
109
- ['#998DD9']: "var(--ds-background-accent-purple-subtle, #998DD9)",
110
- // source for hex code was legacy token P100
111
- // whiteGray
155
+ ['#998DD9']: {
156
+ tokenName: 'color.background.accent.purple.subtle',
157
+ token: "var(--ds-background-accent-purple-subtle, #998DD9)" // source for hex code was legacy token P100,
158
+ },
112
159
 
160
+ // whiteGray
113
161
  /** whiteGray - light */
114
- ['#FFFFFF']: "var(--ds-surface, #FFFFFF)",
115
- // source for hex code was legacy token N0
162
+ ['#FFFFFF']: {
163
+ tokenName: 'elevation.surface',
164
+ token: "var(--ds-surface, #FFFFFF)" // source for hex code was legacy token N0,
165
+ },
116
166
 
117
167
  /** whiteGray - medium */
118
- ['#F4F5F7']: "var(--ds-background-accent-gray-subtlest, #F4F5F7)",
119
- // source for hex code was legacy token N20
168
+ ['#F4F5F7']: {
169
+ tokenName: 'color.background.accent.gray.subtlest',
170
+ token: "var(--ds-background-accent-gray-subtlest, #F4F5F7)" // source for hex code was legacy token N20,
171
+ },
120
172
 
121
173
  /** whiteGray - strong */
122
- ['#B3BAC5']: "var(--ds-background-accent-gray-subtle, #B3BAC5)" // source for hex code was legacy token N60
123
-
124
- };
174
+ ['#B3BAC5']: {
175
+ tokenName: 'color.background.accent.gray.subtle',
176
+ token: "var(--ds-background-accent-gray-subtle, #B3BAC5)" // source for hex code was legacy token N60,
177
+ }
178
+ };
179
+
180
+ const backgroundPaletteKeys = Object.keys(editorBackgroundPalette);
181
+ const tokenNames = backgroundPaletteKeys.map(hexCode => editorBackgroundPalette[hexCode].tokenName);
package/dist/es2019/index.js CHANGED
@@ -1,2 +1,3 @@
1
- export { hexToEditorBackgroundPaletteColor, editorBackgroundPalette } from './background';
2
- export { hexToEditorTextPaletteColor, editorTextPalette } from './text';
1
+ export { hexToEditorBackgroundPaletteColor, hexToEditorBackgroundPaletteColorTokenName } from './background';
2
+ export { hexToEditorTextPaletteColor } from './text';
3
+ export { hexToEditorTableChartsPaletteColor } from './table-charts';
package/dist/es2019/table-charts.js ADDED
@@ -0,0 +1,80 @@
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 chart palette
6
+ * color.
7
+ *
8
+ * By providing a design token, this enables ADF content to be rendered in new themes such as dark mode.
9
+ *
10
+ * Example usage
11
+ * ```tsx
12
+ * const cssValue = hexToEditorTableChartsPaletteColor('#FFFFFF');
13
+ * // ^? const cssValue: string
14
+ * <div style={{backgroundColor: cssValue}} />
15
+ * ```
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
+ export function hexToEditorTableChartsPaletteColor(hexColor) {
24
+ // Ts ignore used to allow use of conditional return type
25
+ // (preferencing better type on consumption over safety in implementation)
26
+ // @ts-ignore
27
+ return editorTableChartsPalette[hexColor.toUpperCase()];
28
+ }
29
+ // Colors taken from
30
+ // https://hello.atlassian.net/wiki/spaces/DST/pages/1790979421/DSTRFC-002+-+Shifting+Editor+s+color+palette+to+design+tokens
31
+ // values are asserted to improve generated type declarations
32
+
33
+ /**
34
+ * Tokenize hex codes into DST chart colors or
35
+ * into DST background.accent colors.
36
+ *
37
+ * The hex codes do not match the DST tokens, they are
38
+ * constants that are saved in the ADF that will be rendered
39
+ * as the mapped DST token.
40
+ *
41
+ * https://product-fabric.atlassian.net/browse/ED-17042
42
+ */
43
+ 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
+ };