@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/dist/es2019/text.js CHANGED
@@ -18,6 +18,7 @@
18
18
  * - **DO NOT**: store the output of these functions in any user-generated content or back-end.
19
19
  * - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color
20
20
  */
21
+
21
22
  export function hexToEditorTextPaletteColor(hexColor) {
22
23
  // Ts ignore used to allow use of conditional return type
23
24
  // (preferencing better type on consumption over safety in implementation)
@@ -29,94 +30,78 @@ export function hexToEditorTextPaletteColor(hexColor) {
29
30
  // values are asserted to improve generated type declarations
30
31
  export const editorTextPalette = {
31
32
  // blue
32
-
33
33
  /** blue - light */
34
34
  ['#B3D4FF']: "var(--ds-background-accent-blue-subtler, #B3D4FF)",
35
35
  // source for hex code was legacy token B75
36
-
37
36
  /** blue - medium */
38
37
  ['#4C9AFF']: "var(--ds-icon-accent-blue, #4C9AFF)",
39
38
  // source for hex code was legacy token B100
40
-
41
39
  /** blue - strong */
42
40
  ['#0747A6']: "var(--ds-text-accent-blue, #0747A6)",
43
41
  // source for hex code was legacy token B500
44
- // teal
45
42
 
43
+ // teal
46
44
  /** teal - light */
47
45
  ['#B3F5FF']: "var(--ds-background-accent-teal-subtler, #B3F5FF)",
48
46
  // source for hex code was legacy token T75
49
-
50
47
  /** teal - medium */
51
48
  ['#00B8D9']: "var(--ds-icon-accent-teal, #00B8D9)",
52
49
  // source for hex code was legacy token T300
53
-
54
50
  /** teal - strong */
55
51
  ['#008DA6']: "var(--ds-text-accent-teal, #008DA6)",
56
52
  // source for hex code was legacy token T500
57
- // green
58
53
 
54
+ // green
59
55
  /** green - light */
60
56
  ['#ABF5D1']: "var(--ds-background-accent-green-subtler, #ABF5D1)",
61
57
  // source for hex code was legacy token G75
62
-
63
58
  /** green - medium */
64
59
  ['#36B37E']: "var(--ds-icon-accent-green, #36B37E)",
65
60
  // source for hex code was legacy token G300
66
-
67
61
  /** green - strong */
68
62
  ['#006644']: "var(--ds-text-accent-green, #006644)",
69
63
  // source for hex code was legacy token G500
70
- // yellowOrange
71
64
 
65
+ // yellowOrange
72
66
  /** yellowOrange - light */
73
67
  ['#FFF0B3']: "var(--ds-background-accent-yellow-subtler, #FFF0B3)",
74
68
  // source for hex code was legacy token Y75
75
-
76
69
  /** yellowOrange - medium */
77
70
  ['#FFC400']: "var(--ds-background-accent-orange-subtle, #FFC400)",
78
71
  // source for hex code was legacy token Y200
79
-
80
72
  /** yellowOrange - strong */
81
73
  ['#FF991F']: "var(--ds-icon-accent-orange, #FF991F)",
82
74
  // source for hex code was legacy token Y400
83
- // red
84
75
 
76
+ // red
85
77
  /** red - light */
86
78
  ['#FFBDAD']: "var(--ds-background-accent-red-subtler, #FFBDAD)",
87
79
  // source for hex code was legacy token R75
88
-
89
80
  /** red - medium */
90
81
  ['#FF5630']: "var(--ds-icon-accent-red, #FF5630)",
91
82
  // source for hex code was legacy token R300
92
-
93
83
  /** red - strong */
94
84
  ['#BF2600']: "var(--ds-text-accent-red, #BF2600)",
95
85
  // source for hex code was legacy token R500
96
- // purple
97
86
 
87
+ // purple
98
88
  /** purple - light */
99
89
  ['#EAE6FF']: "var(--ds-background-accent-purple-subtler, #EAE6FF)",
100
90
  // source for hex code was legacy token P50
101
-
102
91
  /** purple - medium */
103
92
  ['#6554C0']: "var(--ds-icon-accent-purple, #6554C0)",
104
93
  // source for hex code was legacy token P300
105
-
106
94
  /** purple - strong */
107
95
  ['#403294']: "var(--ds-text-accent-purple, #403294)",
108
96
  // source for hex code was legacy token P500
109
- // whiteGray
110
97
 
98
+ // whiteGray
111
99
  /** whiteGray - light */
112
100
  ['#FFFFFF']: "var(--ds-text-inverse, #FFFFFF)",
113
101
  // source for hex code was legacy token N0
114
-
115
102
  /** whiteGray - medium */
116
103
  ['#97A0AF']: "var(--ds-icon-accent-gray, #97A0AF)",
117
104
  // source for hex code was legacy token N80
118
-
119
105
  /** whiteGray - strong */
120
106
  ['#172B4D']: "var(--ds-text, #172B4D)" // source for hex code was legacy token N800
121
-
122
107
  };
package/dist/es2019/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/esm/background.js CHANGED
@@ -1,7 +1,5 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
-
3
2
  var _editorBackgroundPale;
4
-
5
3
  // This import will be stripped on build
6
4
  // eslint-disable-next-line import/no-extraneous-dependencies
7
5
 
@@ -28,9 +26,88 @@ export function hexToEditorBackgroundPaletteColor(hexColor) {
28
26
  // Ts ignore used to allow use of conditional return type
29
27
  // (preferencing better type on consumption over safety in implementation)
30
28
  // @ts-ignore
31
- return editorBackgroundPalette[hexColor.toUpperCase()];
29
+ var tokenData = editorBackgroundPalette[hexColor.toUpperCase()];
30
+ return tokenData ? tokenData.token : undefined;
31
+ }
32
+ export function hexToEditorBackgroundPaletteColorTokenName(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 = editorBackgroundPalette[hexColor.toUpperCase()];
37
+ return tokenData ? tokenData.tokenName : undefined;
32
38
  }
33
39
  // Colors taken from
34
40
  // https://hello.atlassian.net/wiki/spaces/DST/pages/1790979421/DSTRFC-002+-+Shifting+Editor+s+color+palette+to+design+tokens
41
+
35
42
  // values are asserted to improve generated type declarations
36
- export var editorBackgroundPalette = (_editorBackgroundPale = {}, _defineProperty(_editorBackgroundPale, '#DEEBFF', "var(--ds-background-accent-blue-subtlest, #DEEBFF)"), _defineProperty(_editorBackgroundPale, '#B3D4FF', "var(--ds-background-accent-blue-subtler, #B3D4FF)"), _defineProperty(_editorBackgroundPale, '#4C9AFF', "var(--ds-background-accent-blue-subtle, #4C9AFF)"), _defineProperty(_editorBackgroundPale, '#E6FCFF', "var(--ds-background-accent-teal-subtlest, #E6FCFF)"), _defineProperty(_editorBackgroundPale, '#B3F5FF', "var(--ds-background-accent-teal-subtler, #B3F5FF)"), _defineProperty(_editorBackgroundPale, '#79E2F2', "var(--ds-background-accent-teal-subtle, #79E2F2)"), _defineProperty(_editorBackgroundPale, '#E3FCEF', "var(--ds-background-accent-green-subtlest, #E3FCEF)"), _defineProperty(_editorBackgroundPale, '#ABF5D1', "var(--ds-background-accent-green-subtler, #ABF5D1)"), _defineProperty(_editorBackgroundPale, '#57D9A3', "var(--ds-background-accent-green-subtle, #57D9A3)"), _defineProperty(_editorBackgroundPale, '#FFFAE6', "var(--ds-background-accent-yellow-subtlest, #FFFAE6)"), _defineProperty(_editorBackgroundPale, '#FFF0B3', "var(--ds-background-accent-yellow-subtler, #FFF0B3)"), _defineProperty(_editorBackgroundPale, '#FFC400', "var(--ds-background-accent-orange-subtle, #FFC400)"), _defineProperty(_editorBackgroundPale, '#FFEBE6', "var(--ds-background-accent-red-subtlest, #FFEBE6)"), _defineProperty(_editorBackgroundPale, '#FFBDAD', "var(--ds-background-accent-red-subtler, #FFBDAD)"), _defineProperty(_editorBackgroundPale, '#FF8F73', "var(--ds-background-accent-red-subtle, #FF8F73)"), _defineProperty(_editorBackgroundPale, '#EAE6FF', "var(--ds-background-accent-purple-subtlest, #EAE6FF)"), _defineProperty(_editorBackgroundPale, '#C0B6F2', "var(--ds-background-accent-purple-subtler, #C0B6F2)"), _defineProperty(_editorBackgroundPale, '#998DD9', "var(--ds-background-accent-purple-subtle, #998DD9)"), _defineProperty(_editorBackgroundPale, '#FFFFFF', "var(--ds-surface, #FFFFFF)"), _defineProperty(_editorBackgroundPale, '#F4F5F7', "var(--ds-background-accent-gray-subtlest, #F4F5F7)"), _defineProperty(_editorBackgroundPale, '#B3BAC5', "var(--ds-background-accent-gray-subtle, #B3BAC5)"), _editorBackgroundPale);
43
+ // Modified structure as having tokenName, token
44
+ // and possibly editorColorName in future will make it
45
+ // simpler to link everything together.
46
+ export var editorBackgroundPalette = (_editorBackgroundPale = {}, _defineProperty(_editorBackgroundPale, '#DEEBFF', {
47
+ tokenName: 'color.background.accent.blue.subtlest',
48
+ token: "var(--ds-background-accent-blue-subtlest, #DEEBFF)"
49
+ }), _defineProperty(_editorBackgroundPale, '#B3D4FF', {
50
+ tokenName: 'color.background.accent.blue.subtler',
51
+ token: "var(--ds-background-accent-blue-subtler, #B3D4FF)"
52
+ }), _defineProperty(_editorBackgroundPale, '#4C9AFF', {
53
+ tokenName: 'color.background.accent.blue.subtle',
54
+ token: "var(--ds-background-accent-blue-subtle, #4C9AFF)"
55
+ }), _defineProperty(_editorBackgroundPale, '#E6FCFF', {
56
+ tokenName: 'color.background.accent.teal.subtlest',
57
+ token: "var(--ds-background-accent-teal-subtlest, #E6FCFF)" // source for hex code was legacy token T50,
58
+ }), _defineProperty(_editorBackgroundPale, '#B3F5FF', {
59
+ tokenName: 'color.background.accent.teal.subtler',
60
+ token: "var(--ds-background-accent-teal-subtler, #B3F5FF)" // source for hex code was legacy token T75,
61
+ }), _defineProperty(_editorBackgroundPale, '#79E2F2', {
62
+ tokenName: 'color.background.accent.teal.subtle',
63
+ token: "var(--ds-background-accent-teal-subtle, #79E2F2)" // source for hex code was legacy token T100,
64
+ }), _defineProperty(_editorBackgroundPale, '#E3FCEF', {
65
+ tokenName: 'color.background.accent.green.subtlest',
66
+ token: "var(--ds-background-accent-green-subtlest, #E3FCEF)" // source for hex code was legacy token G50,
67
+ }), _defineProperty(_editorBackgroundPale, '#ABF5D1', {
68
+ tokenName: 'color.background.accent.green.subtler',
69
+ token: "var(--ds-background-accent-green-subtler, #ABF5D1)" // source for hex code was legacy token G75,
70
+ }), _defineProperty(_editorBackgroundPale, '#57D9A3', {
71
+ tokenName: 'color.background.accent.green.subtle',
72
+ token: "var(--ds-background-accent-green-subtle, #57D9A3)" // source for hex code was legacy token G200,
73
+ }), _defineProperty(_editorBackgroundPale, '#FFFAE6', {
74
+ tokenName: 'color.background.accent.yellow.subtlest',
75
+ token: "var(--ds-background-accent-yellow-subtlest, #FFFAE6)" // source for hex code was legacy token Y50,
76
+ }), _defineProperty(_editorBackgroundPale, '#FFF0B3', {
77
+ tokenName: 'color.background.accent.yellow.subtler',
78
+ token: "var(--ds-background-accent-yellow-subtler, #FFF0B3)" // source for hex code was legacy token Y75,
79
+ }), _defineProperty(_editorBackgroundPale, '#FFC400', {
80
+ tokenName: 'color.background.accent.orange.subtle',
81
+ token: "var(--ds-background-accent-orange-subtle, #FFC400)" // source for hex code was legacy token Y200,
82
+ }), _defineProperty(_editorBackgroundPale, '#FFEBE6', {
83
+ tokenName: 'color.background.accent.red.subtlest',
84
+ token: "var(--ds-background-accent-red-subtlest, #FFEBE6)" // source for hex code was legacy token R50,
85
+ }), _defineProperty(_editorBackgroundPale, '#FFBDAD', {
86
+ tokenName: 'color.background.accent.red.subtler',
87
+ token: "var(--ds-background-accent-red-subtler, #FFBDAD)" // source for hex code was legacy token R75,
88
+ }), _defineProperty(_editorBackgroundPale, '#FF8F73', {
89
+ tokenName: 'color.background.accent.red.subtle',
90
+ token: "var(--ds-background-accent-red-subtle, #FF8F73)" // source for hex code was legacy token R100,
91
+ }), _defineProperty(_editorBackgroundPale, '#EAE6FF', {
92
+ tokenName: 'color.background.accent.purple.subtlest',
93
+ token: "var(--ds-background-accent-purple-subtlest, #EAE6FF)" // source for hex code was legacy token P50,
94
+ }), _defineProperty(_editorBackgroundPale, '#C0B6F2', {
95
+ tokenName: 'color.background.accent.purple.subtler',
96
+ token: "var(--ds-background-accent-purple-subtler, #C0B6F2)" // source for hex code was legacy token P75,
97
+ }), _defineProperty(_editorBackgroundPale, '#998DD9', {
98
+ tokenName: 'color.background.accent.purple.subtle',
99
+ token: "var(--ds-background-accent-purple-subtle, #998DD9)" // source for hex code was legacy token P100,
100
+ }), _defineProperty(_editorBackgroundPale, '#FFFFFF', {
101
+ tokenName: 'elevation.surface',
102
+ token: "var(--ds-surface, #FFFFFF)" // source for hex code was legacy token N0,
103
+ }), _defineProperty(_editorBackgroundPale, '#F4F5F7', {
104
+ tokenName: 'color.background.accent.gray.subtlest',
105
+ token: "var(--ds-background-accent-gray-subtlest, #F4F5F7)" // source for hex code was legacy token N20,
106
+ }), _defineProperty(_editorBackgroundPale, '#B3BAC5', {
107
+ tokenName: 'color.background.accent.gray.subtle',
108
+ token: "var(--ds-background-accent-gray-subtle, #B3BAC5)" // source for hex code was legacy token N60,
109
+ }), _editorBackgroundPale);
110
+ var backgroundPaletteKeys = Object.keys(editorBackgroundPalette);
111
+ var tokenNames = backgroundPaletteKeys.map(function (hexCode) {
112
+ return editorBackgroundPalette[hexCode].tokenName;
113
+ });
package/dist/esm/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/esm/table-charts.js ADDED
@@ -0,0 +1,45 @@
1
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
+ var _editorTableChartsPal;
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 chart palette
8
+ * color.
9
+ *
10
+ * By providing a design token, this enables ADF content to be rendered in new themes such as dark mode.
11
+ *
12
+ * Example usage
13
+ * ```tsx
14
+ * const cssValue = hexToEditorTableChartsPaletteColor('#FFFFFF');
15
+ * // ^? const cssValue: string
16
+ * <div style={{backgroundColor: cssValue}} />
17
+ * ```
18
+ *
19
+ * The names of tokens can change over time, and the values of tokens will differ between themes.
20
+ * The exact output of this function is an implementation detail and should only be used when rendering
21
+ * content to the user, on a client with a matching major version of `@atlaskit/tokens`.
22
+ * - **DO NOT**: store the output of these functions in any user-generated content or back-end.
23
+ * - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color
24
+ */
25
+ export function hexToEditorTableChartsPaletteColor(hexColor) {
26
+ // Ts ignore used to allow use of conditional return type
27
+ // (preferencing better type on consumption over safety in implementation)
28
+ // @ts-ignore
29
+ return editorTableChartsPalette[hexColor.toUpperCase()];
30
+ }
31
+ // Colors taken from
32
+ // https://hello.atlassian.net/wiki/spaces/DST/pages/1790979421/DSTRFC-002+-+Shifting+Editor+s+color+palette+to+design+tokens
33
+ // values are asserted to improve generated type declarations
34
+
35
+ /**
36
+ * Tokenize hex codes into DST chart colors or
37
+ * into DST background.accent colors.
38
+ *
39
+ * The hex codes do not match the DST tokens, they are
40
+ * constants that are saved in the ADF that will be rendered
41
+ * as the mapped DST token.
42
+ *
43
+ * https://product-fabric.atlassian.net/browse/ED-17042
44
+ */
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);
package/dist/esm/text.js CHANGED
@@ -1,7 +1,5 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
-
3
2
  var _editorTextPalette;
4
-
5
3
  // This import will be stripped on build
6
4
  // eslint-disable-next-line import/no-extraneous-dependencies
7
5
 
@@ -22,6 +20,7 @@ var _editorTextPalette;
22
20
  * - **DO NOT**: store the output of these functions in any user-generated content or back-end.
23
21
  * - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color
24
22
  */
23
+
25
24
  export function hexToEditorTextPaletteColor(hexColor) {
26
25
  // Ts ignore used to allow use of conditional return type
27
26
  // (preferencing better type on consumption over safety in implementation)
package/dist/esm/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/types/background.d.ts CHANGED
@@ -17,51 +17,117 @@
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 hexToEditorBackgroundPaletteColor<HexColor extends string>(hexColor: HexColor): HexColor extends EditorBackgroundPaletteKey ? EditorBackgroundPalette[HexColor] : string | undefined;
20
+ export declare function hexToEditorBackgroundPaletteColor<HexColor extends string>(hexColor: HexColor): HexColor extends EditorBackgroundPaletteKey ? EditorBackgroundPalette[HexColor]['token'] : string | undefined;
21
+ export declare function hexToEditorBackgroundPaletteColorTokenName<HexColor extends string>(hexColor: HexColor): HexColor extends EditorBackgroundPaletteKey ? EditorBackgroundPalette[HexColor]['tokenName'] : EditorBackgroundPaletteTokenNames | undefined;
21
22
  declare type EditorBackgroundPalette = typeof editorBackgroundPalette;
22
23
  export declare type EditorBackgroundPaletteKey = keyof EditorBackgroundPalette;
23
24
  export declare const editorBackgroundPalette: {
24
25
  /** blue - light */
25
- "#DEEBFF": "var(--ds-background-accent-blue-subtlest, #DEEBFF)";
26
+ "#DEEBFF": {
27
+ tokenName: "color.background.accent.blue.subtlest";
28
+ token: "var(--ds-background-accent-blue-subtlest, #DEEBFF)";
29
+ };
26
30
  /** blue - medium */
27
- "#B3D4FF": "var(--ds-background-accent-blue-subtler, #B3D4FF)";
31
+ "#B3D4FF": {
32
+ tokenName: "color.background.accent.blue.subtler";
33
+ token: "var(--ds-background-accent-blue-subtler, #B3D4FF)";
34
+ };
28
35
  /** blue - strong */
29
- "#4C9AFF": "var(--ds-background-accent-blue-subtle, #4C9AFF)";
36
+ "#4C9AFF": {
37
+ tokenName: "color.background.accent.blue.subtle";
38
+ token: "var(--ds-background-accent-blue-subtle, #4C9AFF)";
39
+ };
30
40
  /** teal - light */
31
- "#E6FCFF": "var(--ds-background-accent-teal-subtlest, #E6FCFF)";
41
+ "#E6FCFF": {
42
+ tokenName: "color.background.accent.teal.subtlest";
43
+ token: "var(--ds-background-accent-teal-subtlest, #E6FCFF)";
44
+ };
32
45
  /** teal - medium */
33
- "#B3F5FF": "var(--ds-background-accent-teal-subtler, #B3F5FF)";
46
+ "#B3F5FF": {
47
+ tokenName: "color.background.accent.teal.subtler";
48
+ token: "var(--ds-background-accent-teal-subtler, #B3F5FF)";
49
+ };
34
50
  /** teal - strong */
35
- "#79E2F2": "var(--ds-background-accent-teal-subtle, #79E2F2)";
51
+ "#79E2F2": {
52
+ tokenName: "color.background.accent.teal.subtle";
53
+ token: "var(--ds-background-accent-teal-subtle, #79E2F2)";
54
+ };
36
55
  /** green - light */
37
- "#E3FCEF": "var(--ds-background-accent-green-subtlest, #E3FCEF)";
56
+ "#E3FCEF": {
57
+ tokenName: "color.background.accent.green.subtlest";
58
+ token: "var(--ds-background-accent-green-subtlest, #E3FCEF)";
59
+ };
38
60
  /** green - medium */
39
- "#ABF5D1": "var(--ds-background-accent-green-subtler, #ABF5D1)";
61
+ "#ABF5D1": {
62
+ tokenName: "color.background.accent.green.subtler";
63
+ token: "var(--ds-background-accent-green-subtler, #ABF5D1)";
64
+ };
40
65
  /** green - strong */
41
- "#57D9A3": "var(--ds-background-accent-green-subtle, #57D9A3)";
66
+ "#57D9A3": {
67
+ tokenName: "color.background.accent.green.subtle";
68
+ token: "var(--ds-background-accent-green-subtle, #57D9A3)";
69
+ };
42
70
  /** yellowOrange - light */
43
- "#FFFAE6": "var(--ds-background-accent-yellow-subtlest, #FFFAE6)";
71
+ "#FFFAE6": {
72
+ tokenName: "color.background.accent.yellow.subtlest";
73
+ token: "var(--ds-background-accent-yellow-subtlest, #FFFAE6)";
74
+ };
44
75
  /** yellowOrange - medium */
45
- "#FFF0B3": "var(--ds-background-accent-yellow-subtler, #FFF0B3)";
76
+ "#FFF0B3": {
77
+ tokenName: "color.background.accent.yellow.subtler";
78
+ token: "var(--ds-background-accent-yellow-subtler, #FFF0B3)";
79
+ };
46
80
  /** yellowOrange - strong */
47
- "#FFC400": "var(--ds-background-accent-orange-subtle, #FFC400)";
81
+ "#FFC400": {
82
+ tokenName: "color.background.accent.orange.subtle";
83
+ token: "var(--ds-background-accent-orange-subtle, #FFC400)";
84
+ };
48
85
  /** red - light */
49
- "#FFEBE6": "var(--ds-background-accent-red-subtlest, #FFEBE6)";
86
+ "#FFEBE6": {
87
+ tokenName: "color.background.accent.red.subtlest";
88
+ token: "var(--ds-background-accent-red-subtlest, #FFEBE6)";
89
+ };
50
90
  /** red - medium */
51
- "#FFBDAD": "var(--ds-background-accent-red-subtler, #FFBDAD)";
91
+ "#FFBDAD": {
92
+ tokenName: "color.background.accent.red.subtler";
93
+ token: "var(--ds-background-accent-red-subtler, #FFBDAD)";
94
+ };
52
95
  /** red - strong */
53
- "#FF8F73": "var(--ds-background-accent-red-subtle, #FF8F73)";
96
+ "#FF8F73": {
97
+ tokenName: "color.background.accent.red.subtle";
98
+ token: "var(--ds-background-accent-red-subtle, #FF8F73)";
99
+ };
54
100
  /** purple - light */
55
- "#EAE6FF": "var(--ds-background-accent-purple-subtlest, #EAE6FF)";
101
+ "#EAE6FF": {
102
+ tokenName: "color.background.accent.purple.subtlest";
103
+ token: "var(--ds-background-accent-purple-subtlest, #EAE6FF)";
104
+ };
56
105
  /** purple - medium */
57
- "#C0B6F2": "var(--ds-background-accent-purple-subtler, #C0B6F2)";
106
+ "#C0B6F2": {
107
+ tokenName: "color.background.accent.purple.subtler";
108
+ token: "var(--ds-background-accent-purple-subtler, #C0B6F2)";
109
+ };
58
110
  /** purple - strong */
59
- "#998DD9": "var(--ds-background-accent-purple-subtle, #998DD9)";
111
+ "#998DD9": {
112
+ tokenName: "color.background.accent.purple.subtle";
113
+ token: "var(--ds-background-accent-purple-subtle, #998DD9)";
114
+ };
60
115
  /** whiteGray - light */
61
- "#FFFFFF": "var(--ds-surface, #FFFFFF)";
116
+ "#FFFFFF": {
117
+ tokenName: "elevation.surface";
118
+ token: "var(--ds-surface, #FFFFFF)";
119
+ };
62
120
  /** whiteGray - medium */
63
- "#F4F5F7": "var(--ds-background-accent-gray-subtlest, #F4F5F7)";
121
+ "#F4F5F7": {
122
+ tokenName: "color.background.accent.gray.subtlest";
123
+ token: "var(--ds-background-accent-gray-subtlest, #F4F5F7)";
124
+ };
64
125
  /** whiteGray - strong */
65
- "#B3BAC5": "var(--ds-background-accent-gray-subtle, #B3BAC5)";
126
+ "#B3BAC5": {
127
+ tokenName: "color.background.accent.gray.subtle";
128
+ token: "var(--ds-background-accent-gray-subtle, #B3BAC5)";
129
+ };
66
130
  };
131
+ declare const tokenNames: ("color.background.accent.blue.subtlest" | "color.background.accent.blue.subtler" | "color.background.accent.blue.subtle" | "color.background.accent.teal.subtlest" | "color.background.accent.teal.subtler" | "color.background.accent.teal.subtle" | "color.background.accent.green.subtlest" | "color.background.accent.green.subtler" | "color.background.accent.green.subtle" | "color.background.accent.yellow.subtlest" | "color.background.accent.yellow.subtler" | "color.background.accent.orange.subtle" | "color.background.accent.red.subtlest" | "color.background.accent.red.subtler" | "color.background.accent.red.subtle" | "color.background.accent.purple.subtlest" | "color.background.accent.purple.subtler" | "color.background.accent.purple.subtle" | "elevation.surface" | "color.background.accent.gray.subtlest" | "color.background.accent.gray.subtle")[];
132
+ export declare type EditorBackgroundPaletteTokenNames = typeof tokenNames[number];
67
133
  export {};
package/dist/types/index.d.ts 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/types/table-charts.d.ts ADDED
@@ -0,0 +1,71 @@
1
+ /**
2
+ * This takes an adf hex color and returns a matching chart palette
3
+ * color.
4
+ *
5
+ * By providing a design token, this enables ADF content to be rendered in new themes such as dark mode.
6
+ *
7
+ * Example usage
8
+ * ```tsx
9
+ * const cssValue = hexToEditorTableChartsPaletteColor('#FFFFFF');
10
+ * // ^? const cssValue: string
11
+ * <div style={{backgroundColor: cssValue}} />
12
+ * ```
13
+ *
14
+ * The names of tokens can change over time, and the values of tokens will differ between themes.
15
+ * The exact output of this function is an implementation detail and should only be used when rendering
16
+ * content to the user, on a client with a matching major version of `@atlaskit/tokens`.
17
+ * - **DO NOT**: store the output of these functions in any user-generated content or back-end.
18
+ * - **DO**: store the ADF hex color, and use these utilities at render time to display the themed version of the color
19
+ */
20
+ export declare function hexToEditorTableChartsPaletteColor<HexColor extends string>(hexColor: HexColor): HexColor extends EditorTableChartsPaletteKey ? EditorTableChartsPalette[HexColor] : string | undefined;
21
+ declare type EditorTableChartsPalette = typeof editorTableChartsPalette;
22
+ export declare type EditorTableChartsPaletteKey = keyof EditorTableChartsPalette;
23
+ /**
24
+ * Tokenize hex codes into DST chart colors or
25
+ * into DST background.accent colors.
26
+ *
27
+ * The hex codes do not match the DST tokens, they are
28
+ * constants that are saved in the ADF that will be rendered
29
+ * as the mapped DST token.
30
+ *
31
+ * https://product-fabric.atlassian.net/browse/ED-17042
32
+ */
33
+ 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)";
70
+ };
71
+ export {};
package/docs/0-intro.tsx ADDED
@@ -0,0 +1,95 @@
1
+ import React from 'react';
2
+
3
+ import { AtlassianInternalWarning, code, md } from '@atlaskit/docs';
4
+ import SectionMessage from '@atlaskit/section-message';
5
+
6
+ export default md`
7
+ ${(<AtlassianInternalWarning />)}
8
+
9
+ # Editor Palettes:
10
+
11
+ In Editor, colors are stored in ADF for certain user-generated content, such as:
12
+ - **Text colors**: \`mark.textColor\`
13
+ - **Custom table backgrounds**: \`tableCell.attrs.background\`, \`tableHeader.attrs.background\`
14
+ - **Custom panel backgrounds**: \`panel.attrs.panelColor\`
15
+
16
+ Although stored in hexadecimal format, these colors need to be displayed differently depending on the current product theme, such as light and dark mode.
17
+
18
+ To support this, this package provides utilities to map hexadecimal colors stored in ADF, to an appropriate design token from the Atlassian Design System.
19
+
20
+ Theming is only supported on web.
21
+
22
+ Documentation for design tokens can be found in the [@atlaskit/token package docs](https://atlassian.design/components/tokens/all-tokens)
23
+ and [@atlaskit/token package examples](https://atlassian.design/components/tokens/examples) on the Atlassian Design System website.
24
+
25
+ For ecosystem apps, learn more about tokens and theming in the announcement post in our [developer forums](https://community.developer.atlassian.com/t/start-using-design-tokens-in-your-apps-and-try-dark-theme-in-jira-cloud/64147).
26
+ Currently, the top-level theme configuration is only documented for internal use.
27
+
28
+ ## Note on usage
29
+
30
+ **This package is only intended for displaying ADF documents.**
31
+
32
+ If you are looking for resources to create a new color palette experience for your product or app,
33
+ you can learn more about the available accent color tokens in the [Design Token guidelines](https://atlassian.design/foundations/color-new/#color-roles),
34
+ or reach out to the Design System Team via the [Atlassian Developer Community forums](https://community.developer.atlassian.com/tag/editor).
35
+
36
+ ## API documentation
37
+
38
+ ${(
39
+ <div style={{ marginTop: '0.5rem' }}>
40
+ <SectionMessage
41
+ title="Design token names and values are an implementation detail."
42
+ appearance="warning"
43
+ >
44
+ <p>
45
+ The names of tokens can change over time, and the values of tokens will
46
+ differ between themes.
47
+ </p>
48
+ <p>
49
+ The exact output of this function is an implementation detail only and
50
+ should only be used when rendering content to the user, on a client with
51
+ a matching major version of <code>@atlaskit/tokens</code>.
52
+ </p>
53
+ <ul>
54
+ <li>
55
+ <strong>DO NOT</strong>: store the output of these functions in any
56
+ user-generated content or back-end.
57
+ </li>
58
+ <li>
59
+ <strong>DO</strong>: store the ADF hex color, and use these utilities
60
+ at render time to display the themed version of the color
61
+ </li>
62
+ </ul>
63
+ </SectionMessage>
64
+ </div>
65
+ )}
66
+
67
+ ### \`hexToTextPaletteColor\`
68
+
69
+ This takes an adf hex color and returns a matching text palette color.
70
+
71
+ By providing a design token, this enables ADF content to be rendered in new themes such as dark mode.
72
+
73
+ #### Example usage
74
+
75
+ ${code`
76
+ const cssValue = hexToTextPaletteColor('#FFFFFF');
77
+ // ^? const cssValue: string
78
+ <div style={{color: cssValue}} />
79
+ `}
80
+
81
+ ### \`hexToBackgroundPaletteColor\`
82
+
83
+ This takes an adf hex color and returns a matching background palette color
84
+
85
+ By providing a design token, this enables ADF content to be rendered in new themes such as dark mode.
86
+
87
+ #### Example usage
88
+
89
+ ${code`
90
+ const cssValue = hexToBackgroundPaletteColor('#FFFFFF');
91
+ // ^? const cssValue: string
92
+ <div style={{backgroundColor: cssValue}} />
93
+ `}
94
+
95
+ `;